简单的React SSR服务器渲染实现
更新时间：2018年12月11日 11:28:24 作者：旧丶时候
这篇文章主要介绍了简单的React SSR服务器渲染实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
为什么要SSR
单页应用将UI层和内容都由javascript来渲染，搜索引擎或网页爬虫需要完成的HTML结构，因此单页应用如果只在客户端渲染，不利于SEO，此外尽管我们可以通过按需加载的形式来减少首页加载的js，但是通过js来渲染DOM的时候还是会有一定的时间延迟。
0.前言
服务端渲染在项目中不是刚需的东西，但有的时候也是需要做一个服务端渲染，项目要做服务端渲染当然是有很多好处的
- 首屏加载快，相比SPA单页应用还要有优势。
- SEO 优化 利于爬虫，爬取数据。
1. 简介
服务端渲染是指页面的渲染和生成是在服务端完成的，并将渲染好的页面返回客户端。
2. 安装
安装的时候版本都是最新版，而新的版本很多方法和API有弃用和更新的，导致最后项目无法运行。
npm install --save-dev koa npm install --save-dev babel-core npm install --save-dev babel-polyfill npm install --save-dev babel-preset-latest-node npm install --save-dev babel-preset-stage-2 npm install --save-dev babel-preset-react # or yarn add -dev koa yarn add -dev babel-core yarn add -dev babel-polyfill yarn add -dev babel-preset-latest-node yarn add -dev babel-preset-stage-2 yarn add -dev babel-preset-react
3.配置
安装完成后写一个启动文件 start.js：
// start.js
require('babel-core/register')({
ignore: [/node_modules/],
presets: [
'stage-2',
'react',
[
"latest-node",
{ "target": "current" }
]
]
});
require('babel-polyfill');
require('./../index');
在写一个入口文件index.js
// index.js
import Koa from 'koa';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
const { renderToString } = ReactDOMServer;
const app = new Koa();
app.use(ctx => {
ctx.body = renderToString(
<div>
<h1>Hello，World</h1>
</div>
);
});
app.listen(3000, () => {
console.log('server run in 3000');
});
执行npm start启动项目
"scripts": {
"start": "node ./src/start.js"
},
4.结果
打开浏览器查看http://localhost:3000/
5.结束语
到这里就完成了一个简单的 React SSR，当然实现React服务端渲染还可以用别的方式，比如Next.js。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域,文章通过代码示例介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了如何使用react和redux构建一个简单的计数器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-01-01
this在javascript中已经相当灵活，这篇文章主要介绍了React.js绑定this的5种方法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了react(含hooks)中同步获取state值的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
使用react-activation实现keepAlive支持返回传参
本文主要介绍了使用react-activation实现keepAlive支持返回传参，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题，本文主要介绍了基于React封装组件的实现步骤，感兴趣的可以了解一下2021-11-11
本篇文章主要介绍了浅谈React 服务器端渲染的使用，React是最受欢迎的客户端 JavaScript 框架，在本教程中，我们将逐步向您介绍服务器端的渲染示例2018-05-05
这篇文章主要为大家详细介绍了React列表栏及购物车组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了React之配置多个代理实现数据请求返回问题，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题，是小编给大家总结的一些react知识点，本文通过一个项目需求实例代码详解给大家介绍的非常详细，需要的朋友可以参考下2021-06-06
最新评论