<b>本文讲的是[译] React 在服务端渲染的实现，</b>
<b></b>
React是最受欢迎的客户端 JavaScript 框架，但你知道吗(或许更应该试试)，你可以使用 React 在服务器端进行渲染？
假设你为客户构建了一个很棒的事件列表 React app。。该应用程序使用了您最喜欢的服务器端工具构建的API。几周后，用户告诉您，他们的页面没有显示在 Google 上，发布到 Facebook 时也显示不出来。 这些问题似乎是可以解决的，对吧？
您会发现，要解决这个问题，需要在初始加载时从服务器渲染 React 页面，以便来自搜索引擎和社交媒体网站的爬虫工具可以读取您的标记。有证据表明，Google 有时会执行 javascript 程序并且对生成的内容进行索引，但并不总是这样。因此，如果您希望确保与其他服务（如 Facebook、Twitter）有良好的 SEO 兼容性，那么始终建议使用服务器端渲染。
在本教程中，我们将逐步介绍服务器端的呈现示例。包括围绕与 API 交流的 React 应用程序的共同路障。
在本教程中，我们将逐步向您介绍服务器端的渲染示例。包括围绕着 APIS 交流一些在服务端渲染 React 应用程序的共同障碍。
可能您的团队谈论到服务端渲染的好处是首先会想到 SEO，但这并不是唯一的潜在好处。
更大的好处如下：服务器端渲染能更快地显示页面。使用服务器端渲染，您的服务器对浏览器进行响应是在您的 HTML 页面可以渲染的时候，因此浏览器可以不用等待所有的 JavaScript 被下载和执行就可以开始渲染。当浏览器下载并执行页面所需的 JavaScript 和其他资源时，不会出现 “白屏” 现象，而 “白屏” 却可能在完全由客户端渲染的 React 网站中出现。
启动器代码中包含以下内容：
package.json - 依赖项
Webpack 和 Babel 配置
index.html - app 的 HTML 文件
index.js - 加载 React 并渲染 Hello 组件
要使应用运行，请先克隆资源库：
安装依赖:
然后启动服务器:
如果您查看渲染页面的源代码，您将看到发送到浏览器的标记只是一个到 JavaScript 文件的链接。这意味着页面的内容不能保证被搜索引擎和社交媒体平台抓取:
开始前，让我们安装 Express，一个 Node.js 的服务器端应用程序框架：
我们要创建一个渲染我们的 React 组件的服务器：
让我们分解下程序看看发生了什么事情...
这将返回 Hello 组件的 HTML，我们将其注入到 index.html 的 HTML 中，从而生成服务器上页面的完整 HTML。
要启动服务器，请更新 `package.json` 中的起始脚本，然后运行 <code>npm run start</code> :
浏览 <code>http://localhost:3000</code> 查看应用程序。瞧！您的页面现在正在从服务器渲染出来了。但是有个问题，
如果您在浏览器中查看页面源码，您会注意到博客文章仍未包含在响应中。这是怎么回事？如果我们在 Chrome 中打开网络面板，我们会看到客户端上发生 API 请求。
React Transmit 给了我们优雅的包装器组件（通常称为“高阶组件”），用于获取在客户端和服务器上工作的数据。
这是我们使用 react-transmit 后的组件的代码：
我们已经使用 <code>Transmit.createContainer</code> 将我们的组件包装在一个高级组件中，该组件可以用来获取数据。我们在 React 组件中删除了生命周期方法，因为无需两次获取数据。同时我们把 render 方法中的 state 替换成 props，因为 React Transmit 将数据作为 props 传递给组件。
为了确保服务器在渲染之前获取数据，我们导入 Transmit 并使用 <code>Transmit.renderToString</code> 而不是 <code>ReactDOM.renderToString</code> 方法
重新启动服务器浏览到 <code>http://localhost：3000</code>。查看页面源代码，您将看到该页面现在完全呈现在服务器上！
<b>原文发布时间为：2017年7月4日</b>
<b>本文来自云栖社区合作伙伴掘金，了解相关信息可以关注掘金网站。</b>