单页应用将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.结果
打开浏览器查看:3000/
5.结束语
到这里就完成了一个简单的 React SSR，当然实现React服务端渲染还可以用别的方式，比如Next.js。