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.
来源: http://www.jianshu.com/p/6f20f63d29a5