13、React 服务端渲染与移动优先组件开发

React 服务端渲染与移动优先组件开发

1. React 服务端渲染

React 不仅可以在客户端渲染，还能在服务端渲染。服务端渲染有诸多好处，比如前后端可以共享通用代码，其主要优势在于能提升页面初始加载性能，带来更好的用户体验和产品质量。

1.1 前端协调

之前的示例缺少客户端 JavaScript 代码。用户要使用应用，服务器需提供客户端代码包。我们希望路由在前后端都能正常工作，且无需修改路由本身。服务器在初始请求时处理路由，之后用户在应用中点击操作时，浏览器接管路由。

以下是客户端的主要模块代码：

import React from 'react';
import { render } from 'react-dom';
import routes from './routes';

render(
  routes,
  document.getElementById('app')
);

客户端使用 render() 渲染路由，而非像 Express 请求处理程序那样调用 match() 和 renderToString() 。React 知晓后端渲染，会查找已由 React 组件渲染的内容。根元素上有一个校验和，用于与实际渲染组件的校验和进行比较。若不匹配，服务器内容将被重新渲染的组件替换。

例如，渲染如下 JSX 不是个好主意：