React是最受欢迎的客户端 Javascript 框架，但你知道吗(可以试试)，你可以使用 React 在服务器端进行渲染？
假设你已经在客户端使用 React 构建了一个事件列表 app。该应用程序使用了您最喜欢的服务器端工具构建的API。几周后，用户告诉您，他们的页面没有显示在 Google 上，发布到 Facebook 时也显示不出来。 这些问题似乎是可以解决的，对吧？
您会发现，要解决这个问题，需要在初始加载时从服务器渲染 React 页面，以便来自搜索引擎和社交媒体网站的爬虫工具可以读取您的标记。有证据表明，Google 有时会执行 javascript 程序并且对生成的内容进行索引，但并不总是的。因此，如果您希望确保与其他服务（如Facebook，Twitter）有良好的SEO兼容性，那么始终建议使用服务器端渲染。
在本教程中，我们将逐步介绍服务器端的呈现示例。包括围绕与API交流的React应用程序的共同路障。
在本教程中，我们将逐步向您介绍服务器端的渲染示例。包括围绕着 APIS 交流一些在服务端渲染 React 应用程序的共同障碍。
服务端渲染的优势
可能您的团队谈论到服务端渲染的好处是首先会想到 SEO，但这并不是唯一的潜在好处。
更大的好处如下：服务器端渲染能更快地显示页面。使用服务器端渲染，您的服务器对浏览器进行响应是在您的 HTML 页面可以渲染的时候，因此浏览器可以不用等待所有的 Javascript 被下载和执行就可以开始渲染。当浏览器下载并执行页面所需的 Javascript 和其他资源时，不会出现 “白屏” 现象，而 “白屏” 这是在完全有客户端呈现的 React 网站中可能发生的情况。
入门
接下来让我们来看看如何将服务器端渲染添加到一个基本的客户端渲染的使用Babel和Webpack的React应用程序中。我们的应用程序将增加从第三方 API 获取数据的复杂性。我们在GitHub上提供了相关代码，您可以在其中看到完整的示例。
提供的代码中只有一个 React 组件，`hello.js`，这个文件将向 ButterCMS 发出异步请求，并渲染返回的 JSON 列表的博文。ButterCMS 是一个基于API的博客引擎，可供个人使用，因此它非常适合测试现实生活中的用例。启动代码中连接着一个 API token，如果你想使用你自己的 API token 可以使用你的 GitHub 账号登入 ButterCMS。
import React from 'react';
import Butter from 'buttercms'
const butter = Butter('b60a008584313ed21803780bc9208557b3b49fbb');
var Hello = React.createClass({
getInitialState: function() {
return {loaded: false};
},
componentWillMount: function() {
butter.post.list().then((resp) => {
this.setState({
loaded: true,
resp: resp.data
})
});
},
render: function() {
if (this.state.loaded) {
return (
{this.state.resp.data.map((post) => {
return (
{post.title}
)
})}
);
} else {
return Loading...;
}
}
});
export default Hello;
启动器代码中包含以下内容：
- package.json - 依赖项
- Webpack 和 Babel 配置
- index.html - app 的 HTML 文件
- index.js - 加载 React 并渲染 Hello 组件
要使应用运行，请先克隆资源库：
git clone ... cd ..
安装依赖:
npm install
然后启动服务器:
npm run start
浏览器输入 http://localhost:8000 可以看到这个 app: (这里译者进行补充，package.json 里的 start 命令改为如下："start": webpack-dev-server --watch)
如果您查看渲染页面的源代码，您将看到发送到浏览器的标记只是一个到 Javascript 文件的链接。这意味着页面的内容不能保证被搜索引擎和社交媒体平台抓取:
增加服务器端渲染
接下来，我们将实现服务器端渲染，以便将完全生成的HTML发送到浏览器。如果要同时查看所有更改，请查看GitHub上的差异。
To get started, we'll install Express, a Node.js server side application framework:
开始前，让我们安装 Express，一个 Node.js 的服务器端应用程序框架：
npm install express --save
我们要创建一个渲染我们的 React 组件的服务器：
import express from 'express';
import fs from 'fs';
import path from 'path';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import Hello from './Hello.js';
function handleRender(req, res) {
// 把 Hello 组件渲染成 HTML 字符串
const html = ReactDOMServer.renderToString(
