react ssr php,简单的React SSR

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(

Hello，World

);

});

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。