0.前言
服务端渲染在项目中不是刚需的东西，但有的时候也是需要做一个服务端渲染，项目要做服务端渲染当然是有很多好处的
- 首屏加载快，相比SPA单页应用还要有优势。
- SEO 优化 利于爬虫，爬取数据。
timg.jpeg
1. 简介
服务端渲染是指页面的渲染和生成是在服务端完成的，并将渲染好的页面返回客户端。
2. 安装
安装的时候版本都是最新版，而新的版本很多方法和API有弃用和更新的，导致最后项目无法运行，可以参考一下我上传到好的这个demo
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/
image.png
5.结束语
到这里就完成了一个简单的 React SSR，当然实现React服务端渲染还可以用别的方式，比如Next.js。
