基于 React 的服务器端渲染指南
什么是服务器端渲染？
服务器端渲染（Server-Side Rendering，简称 SSR）指的是将组件代码在服务端进行渲染，然后返回一个完整的 HTML 页面给客户端浏览器，最终呈现给用户的是一个已经完成了渲染的页面，而不再是一个空的 HTML 页面。这样做的好处是能够提高页面的加载速度和对搜索引擎的友好度，也能增强网站的浏览体验。
为什么要使用 React 进行服务器端渲染？
React 不仅可以在浏览器端通过 JavaScript 进行渲染，还可以在服务端通过 Node.js 进行渲染。React 服务器端渲染的优点：
提高首屏渲染速度：用户第一次访问页面时，需要进行加载和渲染，而通过 SSR，服务端将页面渲染完成后再传输给客户端，减少了客户端的加载和渲染时间，页面打开速度大大提升。
爬虫搜索友好：搜索引擎爬虫爬取页面时，只能获取到 HTML 文件并解析其中的内容，无法执行 JavaScript，但 React 组件在只能进行某些静态操作时也能执行，而服务器端渲染会返回已经渲染完成的 HTML 页面，搜索引擎能够直接获取到渲染后的 HTML，可以更好地解析并收录。
更良好的 SEO，可提升站点曝光率。
服务端 React 渲染和客户端 React 渲染在使用上没有所谓的二选一或冲突，两个渲染方式可以互补使用。在本质上，它们都是同一个 React 应用的实力。
如何进行 React 服务器端渲染？
以下是基于 Express 服务器的官方示例代码，使用了官方推荐的框架 Next.js：
-- -------------------- ---- -------
----- ------- - ------------------
----- ---- - ---------------
----- --- - -------------------- --- ------------
----- --- - ------ --- --
----- ------ - -----------------------
--------------------- -- -
----- ------ - ---------
--------------- ----- ---- -- -
------ ----------- -----
--
------------------- ----- -- -
-- ----- ----- ---
-------------- ----- -- -----------------------
--
--在 server.js 中，我们首先引入了 Express 和 Next.js，创建了一个 Express 实例 server，并启动了一个在 3000 端口的服务器。然后，我们用 app.prepare() 确保 Next.js 已经准备好后，用 server.get('*', (req, res) => {return handle(req, res);}) 设置一个请求到达服务器的路由。
接着，我们需要将我们的 React 组件转化为模版字符串，然后在服务端将这些模版字符串插入到 HTML 页面中，最后将 HTML 页面返回给客户端浏览器。这个过程中，需要使用到一些 Node.js 的 JavaScript 相关的包，如 babel 和 webpack。
在这里，我们可以利用 Next.js 自带的服务器渲染，在项目目录下新建 pages 文件夹，在里面新建 index.js，并编写 React 组件渲染代码，比如：
import React from 'react'; export default () => ( <div>Hello, world!</div> );
完成以上的代码后，启动服务器，访问 http://localhost:3000 可以在本地看到已经渲染好的结果。
还需要注意的一点是，一般来说，React 生态中的一些库（如 React Router 等）也需要做一些相应的配置，才能够正确的在服务器端渲染页面。
总结
以上就是如何基于 React 进行服务器端渲染的指南。React SSR 真正优秀的地方在于其方便、快捷、灵活，不仅可以保证代码的可维护性，还可以让网站更加现代化，给用户更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ac012948841e98947f972f