服务端渲染

SSR定义

服务端渲染简称SSR，全称是Server Side Render，是指一种传统的渲染方式，就是在浏览器请求页面 URL 的时候，服务端将我们需要的 HTML 文本组装好，并返回给浏览器，这个 HTML 文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中。

CSR渲染流程 SSR渲染流程

SSR最适用于静态展示页面，如果页面动态数据较多时需要谨慎使用

SSR特点

CSR渲染的特点

优点

前端负责渲染页面，后端负责实现接口，两者各司其职
前端跳转时，无需请求后台，跳转性能高，用户体验好

缺点

前端解析执行JS，搜索引擎无法爬取分析网页内容，不利于SEO
页面渲染需要等待js解析执行、接口数据请求等，白屏时间过长

SSR渲染的特点

优点

服务端直接输出HTML，SEO友好
后端返回拼接好的HTML，首屏加载速度快，白屏时间短

缺点

路由跳转需要访问服务器，用户体验较差

实现SSR渲染

renderToString是React代码在服务端渲染的常用方法。 renderToString、renderToStaticMarkup、renderToNodeStream、renderToStaticNodeStream四个方法能够将 React 组件渲染成静态的（HTML）标签，前两者能在客户端和服务端运行，后两者只能在服务端运行。

以React项目为例实现服务端渲染。

javascript 复制代码

import React from 'react';
const Home = () => {
  return (
    <div>
      <div>用于测试React服务端渲染的组件</div>
    </div>
  )
}
export default Home

需要安装Node.js和Express插件

javascript 复制代码

import express from 'express';
import { renderToString } from 'react-dom/server';
import App from './client/App';

const app = express();
// 利用renderToString，将 React 树渲染为一个 HTML 字符串。
const content = renderToString(<Home />);
// 将渲染后的React树，插入HTML结构中，并发给浏览器                               
app.get('/', function (req, res) {
   res.send(
   `
    <html>
      <head>
        <title>ssr</title>
      </head>
      <body>
        <div id="root">${content}</div>
      </body>
    </html>
   `
   );
})
app.listen(3000, () => {
  console.log('listen:3000')
})

同构渲染

同构渲染，就是一套代码在服务器上运行一次，在浏览器上再运行一次。服务器端负责完成页面结构，客户端负责渲染绑定事件。

代码在前端服务器上运行，生成HTML结构，并设置静态资源插入js文件，发给浏览器。浏览器通过加载js文件，绑定DOM事件。客户端接管页面，完成路由跳转。

代码同构的流程：

ReactDOMServer.renderToString：将React渲染为初始的HTML

ini 复制代码

const html = ReactDOMServer.renderToString(<App />);

ReactDom.hydrate：对HTML进行hydrate操作

javascript 复制代码

ReactDOM.hydrate(<App />, document.getElementById('root'));

同构防止多次渲染：

服务器返回的HTML元素上带有一个checksum属性，该属性是根据HTML内容生成的hash值。浏览器加载并执行JS代码后，在浏览器端构建一个虚拟DOM树，根据虚拟DOM树内容生成hash值，与服务端返回的进行对比，对比一致则不再进行下一步操作（将虚拟DOM转化为真实DOM）