01-服务器端React与集成React Router

第12章　服务器端React与集成React Router

本章主要内容

• React服务器端渲染
• 为应用添加服务器端渲染的时机
• 将路由设置转换为React Router
• 使用React Router处理经过身份验证的路由
• 在服务器端渲染期间获取数据
• 在服务器端渲染过程中使用Redux

你知道可以在浏览器之外使用React吗？这是因为 react-dom 库的某些部分不需要浏览器环境就可以工作，而且能够在Node.js运行时（或几乎任何有足够语言支持的JavaScript运行时）中运行。为了公平起见，大部分平台无关的JavaScript都能够在浏览器或服务器端运行，但Node.js平台上读取文件或加密等与IO相关的特性以及浏览器平台上与用户相关的事件和与DOM相关的方面除外。随着Node.js平台的壮大和普及，越来越多的框架开始编写时就考虑到对服务器和浏览器的支持。

对React来说也是如此，它通过React DOM的服务器端API来支持服务器端渲染（Server-Side Rendering，SSR）。这是什么意思呢？SSR通常生成可以通过HTTP或其他协议发送到浏览器的静态HTML标记，SSR仍旧是“渲染”，只不过是在服务器上下文中。应用程序集成SSR在某些情况下是有用的，但某些情况下却没有必要。我们将在本章研究一些服务器端渲染的历史背景，看看什么时候实现它是有意义的，并将它集成到Letters Social应用中，替换掉第7章和第8章中创建的路由器，以便更好地支持SSR并顾及后续改进。我们将使用React来实现一个简单版的服务器端渲染，借此来熟悉基本概念。

如何获取本章代码

和每章一样，读者可以去GitHub仓库检出源代码。如果想从头开始编写本章代码，可以使用第10章和第11章的已有代码（如果跟着编写了示例）或直接检出指定章的代码（chapter-12）。

记住，每个分支对应该章末尾的代码（例如，分支chapter-12对应本章末尾的代码）。读者可以在选定目录下执行以下终端命令之一来获取当前章的代码：

如果还没有代码库，请输入下面的命令来获取：

git clone [email protected]:react-in-action/letters-social.git

如果已经克隆过代码仓库：

git checkout chapter-12

如果你是从其他章来到这里的，则需要确保已经正确安装了所有的依赖：

npm install