什么是服务端渲染

当用户或爬虫程序访问页面 URL 时，将组件或页面通过服务器生成 HTML 字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。服务端渲染只发生在首屏，在客户端处理后面的请求。

服务端渲染和客户端渲染的区别

客户端渲染时，浏览器下载一个最小的 HTML 页面，渲染 JavaScript 并填充进去

服务端渲染时，在服务端渲染 React 组件，输出 HTML 内容

可以组合使用这 2 种方式创建同构应用

如何在页面中快速判断是否为服务端渲染

鼠标右键查看源代码，在页面中看到的内容在源代码中也可以查看到，则是服务端渲染得到的

鼠标右键查看源代码，页面中看到的内容在源代码中不可以查看到，则是客户端渲染得到的

在服务端渲染 React 的后果

如果应用很小，服务端渲染可以改善性能，但是如果应用很大会降低性能

增大了响应时间，如果服务器很忙会更糟糕

增大了响应大小，这意味着需要更长的时间来加载页面

增大了应用的复杂度

在服务端渲染时只会执行到 componentDidMount 之前的生命周期钩子，一些常用的浏览器的 api 可能无法正常使用

什么时候应该使用服务端渲染

SEO，目前搜索引擎爬虫还不能解析 JavaScript，这是使用服务端渲染最主要的原因，特别是对于着陆页

改善性能，在服务端渲染时，应用的性能依赖服务器的资源和用户的网速，这使服务端渲染对于内容密集型网站非常有用；另一个改善是首次用户交互时间，减少白屏等待时间

如何工作

首次访问页面时创建一个新的 Redux Store

选择性的 dispatch action，服务端渲染时客户端不需要初始化 state 的 action

从 Store 中拿到 state 执行 SSR

将上一步获取到的 state 一起返回，用这个 state 在客户端初始化 state

// server rendered home page

app.get('/', (req, res) => {

const { preloadedState, content } = ssr(initialState);

const response = template('Server Rendered Page', preloadedState, content);

res.setHeader('Cache-Control', 'assets, max-age=604800');

res.send(response);

});

function ssr(initialState) {

// Configure the store with the initial state provided

const store = configureStore(initialState);

// render the App store static markup ins content variable

let content = renderToString(

);

// Get a copy of store data to create the same store on client side

const preloadedState = store.getState();

return { content, preloadedState };

}

function template(title, initialState = {}, content = '') {

// Dynamically ship scripts based on render type

let scripts = '';

if (content) {

// 服务端渲染

scripts = `

window.__STATE__ = ${JSON.stringify(initialState)}

`;

} else {

// 客户端渲染

scripts = ` `;

}

let page = `

${title}

${scripts}

`;

return page;

}

// client.js

import React from 'react';

import { hydrate } from 'react-dom';

import { Provider } from 'react-redux';

import configureStore from './redux/configureStore';

import App from './components/app';

// Read the state sent with markup

const state = window.__STATE__;

// delete the state from global window object

delete window.__STATE__;

// reproduce the store used to render the page on server

const store = configureStore(state);

/**

* hydrate the page to make sure both server and client

* side pages are identical. This includes markup checking,

* react comments to identify elements and more.

*/

hydrate(

,

document.querySelector('#app')

);