React 在服务端渲染的实现 #1837

MuYunyun · 2017-07-01T07:32:40Z

issue链接1825

MuYunyun · 2017-07-01T07:33:15Z

@sqrthree 翻译完成

linhe0x0 · 2017-07-01T09:52:30Z

@xx1124961758 这篇已经翻译好了，感兴趣的话可以来校对了哈。

xx1124961758 · 2017-07-01T09:56:00Z

@sqrthree 校对认领

linhe0x0 · 2017-07-01T09:56:22Z

@xx1124961758 好的呢 🍺

CACppuccino · 2017-07-01T13:04:27Z

@sqrthree 校对认领

linhe0x0 · 2017-07-01T13:04:33Z

@CACppuccino 妥妥哒 🍻

CACppuccino

总体没大问题

CACppuccino · 2017-07-01T13:13:16Z

TODO/server-side-react-rendering.md


-React is best known as a client-side JavaScript framework, but did you know you can (and perhaps should!) render React server-side?
+React是最受欢迎的客户端 JavaScript 框架，但你知道吗(可以试试)，你可以使用 React 在服务器端进行渲染？


[可以试试]=>[或许更应该试试]

CACppuccino · 2017-07-01T13:37:10Z

TODO/server-side-react-rendering.md


-Suppose you've built a zippy new event listing React app for a client. The app is hooked up to an API built with your favorite server-side tool. A couple weeks later the client tells you that their pages aren't showing up on Google and don't look good when posted to Facebook. Seems solvable, right?
+假设你已经在客户端使用 React 构建了一个事件列表 app。该应用程序使用了您最喜欢的服务器端工具构建的API。几周后，用户告诉您，他们的页面没有显示在 Google 上，发布到 Facebook 时也显示不出来。 这些问题似乎是可以解决的，对吧？


[假设你已经在客户端使用 React 构建了一个事件列表 app。] => [假设你为一个客户构建了一个很棒的事件列表 app。]

[假设你为一个客户构建了一个很棒的事件列表 app。] => [假设你为客户构建了一个很棒的事件列表 React app。] 因为后文是 their，所以这里是指客户群体

CACppuccino · 2017-07-01T14:22:05Z

TODO/server-side-react-rendering.md


-You figure out that to solve this you'll need to render your React pages from the server on initial load so that crawlers from search engines and social media sites can read your markup. There is evidence showing that Google sometimes executes javascript and can index the generated content, but not always. So server-side rendering is always recommended if you want to ensure good SEO and compatibility with other services like Facebook, Twitter.
+您会发现，要解决这个问题，需要在初始加载时从服务器渲染 React 页面，以便来自搜索引擎和社交媒体网站的爬虫工具可以读取您的标记。有证据表明，Google 有时会执行 javascript 程序并且对生成的内容进行索引，但并不总是的。因此，如果您希望确保与其他服务（如Facebook，Twitter）有良好的SEO兼容性，那么始终建议使用服务器端渲染。


[但并不总是的] => [但并不总是这样]

CACppuccino · 2017-07-01T14:23:17Z

TODO/server-side-react-rendering.md


-You figure out that to solve this you'll need to render your React pages from the server on initial load so that crawlers from search engines and social media sites can read your markup. There is evidence showing that Google sometimes executes javascript and can index the generated content, but not always. So server-side rendering is always recommended if you want to ensure good SEO and compatibility with other services like Facebook, Twitter.
+您会发现，要解决这个问题，需要在初始加载时从服务器渲染 React 页面，以便来自搜索引擎和社交媒体网站的爬虫工具可以读取您的标记。有证据表明，Google 有时会执行 javascript 程序并且对生成的内容进行索引，但并不总是的。因此，如果您希望确保与其他服务（如Facebook，Twitter）有良好的SEO兼容性，那么始终建议使用服务器端渲染。


[（如Facebook，Twitter）有良好的SEO兼容性] => [（如 Facebook，Twitter）有良好的 SEO 兼容性] 中英文间的空格

CACppuccino · 2017-07-01T14:24:55Z

TODO/server-side-react-rendering.md


-In this tutorial, we'll take you through a server side rendering example step-by-step. including working around a common roadblock for React apps that talk to APIs.
+在本教程中，我们将逐步介绍服务器端的呈现示例。包括围绕与API交流的React应用程序的共同路障。


注意中英文空格

CACppuccino · 2017-07-01T14:37:27Z

TODO/server-side-react-rendering.md


-The starter code has just one React component, hello.js, that makes an asynchronous request to the ButterCMS API and renders the returned JSON list of blog posts. ButterCMS is an API-based blog engine that's free for personal use, so it's great for testing out a real-life use case. The starter code comes hooked up with an API token, but if you want you can get your own API token by signing into ButterCMS with your GitHub account.
+提供的代码中只有一个 React 组件，\`hello.js\`，这个文件将向 [ButterCMS](https://buttercms.com/) 发出异步请求，并渲染返回的 JSON 列表的博文。ButterCMS 是一个基于API的博客引擎，可供个人使用，因此它非常适合测试现实生活中的用例。启动代码中连接着一个 API token，如果你想使用你自己的 API token 可以[使用你的 GitHub 账号登入 ButterCMS](https://buttercms.com/home/)。


第二行API空格

CACppuccino · 2017-07-01T14:44:04Z

TODO/server-side-react-rendering.md


 ```
 "scripts": {
  "start": "webpack && babel-node server.js"
 },
 ```

-Browse to http://localhost:3000 to view the app. Voila! Your page is now being rendered from the server. But there's a problem. If you view the page source in the browser. You'll notice that the blog posts are still not included in the response. What's going on? If we open up the network tab in Chrome, we'll see that the API request is happening on the client. 
+浏览 `http://localhost:3000` 查看应用程序。瞧！您的页面现在正在从服务器渲染出来了。但是有个问题，
+如果您在浏览器中查看页面源码，您会注意到博客文章仍未包含在回复中。这是怎么回事？如果我们在Chrome中打开网络标签，我们会看到客户端上发生API请求。


[仍未包含在回复中] => [仍未包含在响应中]

CACppuccino · 2017-07-01T14:45:48Z

TODO/server-side-react-rendering.md


 ```
 "scripts": {
  "start": "webpack && babel-node server.js"
 },
 ```

-Browse to http://localhost:3000 to view the app. Voila! Your page is now being rendered from the server. But there's a problem. If you view the page source in the browser. You'll notice that the blog posts are still not included in the response. What's going on? If we open up the network tab in Chrome, we'll see that the API request is happening on the client. 
+浏览 `http://localhost:3000` 查看应用程序。瞧！您的页面现在正在从服务器渲染出来了。但是有个问题，
+如果您在浏览器中查看页面源码，您会注意到博客文章仍未包含在回复中。这是怎么回事？如果我们在Chrome中打开网络标签，我们会看到客户端上发生API请求。


[打开网络标签] => [打开网络面板]

CACppuccino · 2017-07-01T14:45:58Z

TODO/server-side-react-rendering.md


 ```
 "scripts": {
  "start": "webpack && babel-node server.js"
 },
 ```

-Browse to http://localhost:3000 to view the app. Voila! Your page is now being rendered from the server. But there's a problem. If you view the page source in the browser. You'll notice that the blog posts are still not included in the response. What's going on? If we open up the network tab in Chrome, we'll see that the API request is happening on the client. 
+浏览 `http://localhost:3000` 查看应用程序。瞧！您的页面现在正在从服务器渲染出来了。但是有个问题，
+如果您在浏览器中查看页面源码，您会注意到博客文章仍未包含在回复中。这是怎么回事？如果我们在Chrome中打开网络标签，我们会看到客户端上发生API请求。


中英文空格

CACppuccino · 2017-07-01T14:59:54Z

TODO/server-side-react-rendering.md


+我们做到了！在服务器上使用 React 可能很棘手，尤其是从 API 获取数据时。幸运的是，React社区正在蓬勃发展，并创造了许多有用的工具。如果您对构建在客户端和服务器上渲染的大型 React 应用程序的框架感兴趣，请查看 Walmart Labs 的 [Electrode](https://github.com/electrode-io/electrode) 或 [Next.js](https://github.com/zeit/next.js)。或者如果要在 Ruby 中渲染 React ，请查看 AirBnB 的 [Hypernova](https://github.com/airbnb/hypernova) 。


React社区空格

CACppuccino · 2017-07-01T15:01:34Z

@sqrthree 校对完毕

xx1124961758 · 2017-07-02T02:03:32Z

TODO/server-side-react-rendering.md


-Next we'll implement server side rendering so that fully generated HTML is sent to the browser. If you want to view all the changes at once, view the diff on GitHub.
+接下来，我们将实现服务器端渲染，以便将完全生成的HTML发送到浏览器。如果要同时查看所有更改，请查看[GitHub上的差异](https://github.com/ButterCMS/react-ssr-example/commit/525c625b0f65489050983ed03b52bb7770ce6b7a)。


请查看[Github上的差异] ---> 请在 Github 上查看文件的差异
这样改下会不会好点儿？

xx1124961758 · 2017-07-02T02:18:36Z

TODO/server-side-react-rendering.md

 ReactDOMServer.renderToString(<Hello />);
 ```

-This returns the HTML for the Hello component, which we inject into the HTML of index.html to generate the full HTML for the page on the server.
+这将返回 Hello 组件的 HTML ，我们将其注入到 index.html 的 HTML 中，从而生成服务器上页面的完整 HTML 。


这将返回 Hello 组件的 HTML，我们将其注入到 index.html 的 HTML 中，从而生成服务器上页面的完整 HTML 。
注：HTML与，之间没有空格

MuYunyun · 2017-07-03T02:01:15Z

@sqrthree 按照校对者提出的建议修改完成，请验收

linhe0x0

还有一些小问题需要调整下哈，辛苦啦。

linhe0x0 · 2017-07-03T07:21:39Z

TODO/server-side-react-rendering.md

@@ -1,34 +1,36 @@

+


文件顶部的空行去掉吧，应该是失误导致。

linhe0x0 · 2017-07-03T07:21:51Z

TODO/server-side-react-rendering.md

 > * 原文地址：[Server-Side React Rendering](https://css-tricks.com/server-side-react-rendering/)
 > * 原文作者：[Roger Jin](https://css-tricks.com/author/rogerjin/)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/server-side-react-rendering.md](https://github.com/xitu/gold-miner/blob/master/TODO/server-side-react-rendering.md)
-> * 译者：
+> * 译者：[牧云云](https://github.com/MuYunyun)
 > * 校对者：


校对者信息别忘了加上哈。

linhe0x0 · 2017-07-03T07:23:48Z

TODO/server-side-react-rendering.md

 > * 校对者：

-# Server-Side React Rendering
+# React 在服务端渲染的实现


麻烦请检查下这个是属于什么问题？文中多次出现了。预览链接

linhe0x0 · 2017-07-03T07:24:26Z

TODO/server-side-react-rendering.md


-Next we'll implement server side rendering so that fully generated HTML is sent to the browser. If you want to view all the changes at once, view the diff on GitHub.
+接下来，我们将实现服务器端渲染，以便将完全生成的HTML发送到浏览器。如果要同时查看所有更改，请在 [GitHub](https://github.com/ButterCMS/react-ssr-example/commit/525c625b0f65489050983ed03b52bb7770ce6b7a) 上查看文件的差异。

 To get started, we'll install Express, a Node.js server side application framework:


遗漏的英文。

linhe0x0 · 2017-07-03T07:26:02Z

TODO/server-side-react-rendering.md


-To fix this, we need to make sure the API request completes before the Hello component is rendered. This means making the API request outside of React's component rendering cycle and fetching data before we render the component. We'll take you through this step-by-step, but you can view the complete diff on GitHub.
+要解决这个问题，我们需要在渲染 Hello 组件之前确保 API 请求完成。这意味着要使 API 请求跳出 React 的组件渲染循环，并在渲染组件之前获取数据。我们将逐步介绍这一步，但您可以在[GitHub上查看完整的差异]()https://github.com/ButterCMS/react-ssr-example/commit/5fdd453e31ab08dfdc8b44261696d4ed89fbb719。

 To move data fetching before rendering, we'll install react-transmit:


还有英文呢。

linhe0x0 · 2017-07-03T07:27:02Z

TODO/server-side-react-rendering.md


-To fix this, we need to make sure the API request completes before the Hello component is rendered. This means making the API request outside of React's component rendering cycle and fetching data before we render the component. We'll take you through this step-by-step, but you can view the complete diff on GitHub.
+要解决这个问题，我们需要在渲染 Hello 组件之前确保 API 请求完成。这意味着要使 API 请求跳出 React 的组件渲染循环，并在渲染组件之前获取数据。我们将逐步介绍这一步，但您可以在[GitHub上查看完整的差异]()https://github.com/ButterCMS/react-ssr-example/commit/5fdd453e31ab08dfdc8b44261696d4ed89fbb719。


这个链接的语法错了 =。= 另外，『GitHub』前后请加一个空格。

linhe0x0 · 2017-07-03T07:30:09Z

TODO/server-side-react-rendering.md


+我们做到了！在服务器上使用 React 可能很棘手，尤其是从 API 获取数据时。幸运的是，React 社区正在蓬勃发展，并创造了许多有用的工具。如果您对构建在客户端和服务器上渲染的大型 React 应用程序的框架感兴趣，请查看 Walmart Labs 的 [Electrode](https://github.com/electrode-io/electrode) 或 [Next.js](https://github.com/zeit/next.js)。或者如果要在 Ruby 中渲染 React ，请查看 AirBnB 的 [Hypernova](https://github.com/airbnb/hypernova) 。


『AirBnB』的写法应该为『Airbnb』，参考自官网。

MuYunyun · 2017-07-03T08:28:02Z

@sqrthree 已经修复

linhe0x0

还有一些小问题啦

linhe0x0 · 2017-07-04T02:03:14Z

TODO/server-side-react-rendering.md


-Next we'll implement server side rendering so that fully generated HTML is sent to the browser. If you want to view all the changes at once, view the diff on GitHub.
+接下来，我们将实现服务器端渲染，以便将完全生成的HTML发送到浏览器。如果要同时查看所有更改，请在 [GitHub](https://github.com/ButterCMS/react-ssr-example/commit/525c625b0f65489050983ed03b52bb7770ce6b7a) 上查看文件的差异。


『HTML』前后没有空格

linhe0x0 · 2017-07-04T02:03:36Z

TODO/server-side-react-rendering.md


-You figure out that to solve this you'll need to render your React pages from the server on initial load so that crawlers from search engines and social media sites can read your markup. There is evidence showing that Google sometimes executes javascript and can index the generated content, but not always. So server-side rendering is always recommended if you want to ensure good SEO and compatibility with other services like Facebook, Twitter.
+您会发现，要解决这个问题，需要在初始加载时从服务器渲染 React 页面，以便来自搜索引擎和社交媒体网站的爬虫工具可以读取您的标记。有证据表明，Google 有时会执行 javascript 程序并且对生成的内容进行索引，但并不总是这样。因此，如果您希望确保与其他服务（如 Facebook，Twitter）有良好的SEO兼容性，那么始终建议使用服务器端渲染。


『Facebook，Twitter』=>『Facebook、Twitter』

『SEO』前后加个空格哈

linhe0x0 · 2017-07-04T02:04:10Z

TODO/server-side-react-rendering.md


-Let's go through how to add server-side rendering to a basic client rendered React app with Babel and Webpack. Our app will have the added complexity of getting the data from a third-party API. We've provided starter code on GitHub where you can see the complete example.
+接下来让我们来看看如何将服务器端渲染添加到一个基本的客户端渲染的使用 Babel 和 Webpack 的 React 应用程序中。我们的应用程序将会因从第三方 API 获取数据而变得有点复杂。我们在GitHub上提供了[相关代码](https://github.com/ButterCMS/react-ssr-example/releases/tag/starter-code)，您可以在其中看到完整的示例。


『GitHub』前后没有空格

linhe0x0 · 2017-07-04T02:04:32Z

TODO/server-side-react-rendering.md


-```
+``` js
 const document = data.replace(/<div id="app"><\/div>/,`<div id="app">${html}</div>`);
 ```

 To start the server, update the start script in package.json and then run npm run start:


还有英文没删除

linhe0x0 · 2017-07-04T02:26:27Z

已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接，方便及时添加积分哟。

MuYunyun · 2017-07-04T02:49:25Z

链接

MuYunyun · 2017-07-04T02:49:33Z

@sqrthree

linhe0x0 · 2017-07-04T02:50:01Z

1

MuYunyun added 2 commits July 1, 2017 10:57

Merge remote-tracking branch 'gold-miner/master'

5b1f7f2

React 在服务端渲染的实现

03bf710

linhe0x0 added the 校对认领 label Jul 1, 2017

linhe0x0 mentioned this pull request Jul 1, 2017

React 在服务端渲染的实现 #1825

Closed

linhe0x0 added the 前端 label Jul 1, 2017

linhe0x0 added the 正在校对 label Jul 1, 2017

linhe0x0 removed the 校对认领 label Jul 1, 2017

CACppuccino reviewed Jul 1, 2017

View reviewed changes

xx1124961758 reviewed Jul 2, 2017

View reviewed changes

React 在服务端渲染的实现

ce3559e

linhe0x0 requested changes Jul 3, 2017

View reviewed changes

React 在服务端渲染的实现

157b440

linhe0x0 requested changes Jul 4, 2017

View reviewed changes

React 在服务端渲染的实现

5cce159

linhe0x0 approved these changes Jul 4, 2017

View reviewed changes

linhe0x0 added 翻译完成 and removed 正在校对 labels Jul 4, 2017

linhe0x0 merged commit a247b83 into xitu:master Jul 4, 2017


		React is best known as a client-side JavaScript framework, but did you know you can (and perhaps should!) render React server-side?
		React是最受欢迎的客户端 JavaScript 框架，但你知道吗(可以试试)，你可以使用 React 在服务器端进行渲染？


		Suppose you've built a zippy new event listing React app for a client. The app is hooked up to an API built with your favorite server-side tool. A couple weeks later the client tells you that their pages aren't showing up on Google and don't look good when posted to Facebook. Seems solvable, right?
		假设你已经在客户端使用 React 构建了一个事件列表 app。该应用程序使用了您最喜欢的服务器端工具构建的API。几周后，用户告诉您，他们的页面没有显示在 Google 上，发布到 Facebook 时也显示不出来。这些问题似乎是可以解决的，对吧？


		You figure out that to solve this you'll need to render your React pages from the server on initial load so that crawlers from search engines and social media sites can read your markup. There is evidence showing that Google sometimes executes javascript and can index the generated content, but not always. So server-side rendering is always recommended if you want to ensure good SEO and compatibility with other services like Facebook, Twitter.
		您会发现，要解决这个问题，需要在初始加载时从服务器渲染 React 页面，以便来自搜索引擎和社交媒体网站的爬虫工具可以读取您的标记。有证据表明，Google 有时会执行 javascript 程序并且对生成的内容进行索引，但并不总是的。因此，如果您希望确保与其他服务（如Facebook，Twitter）有良好的SEO兼容性，那么始终建议使用服务器端渲染。


		In this tutorial, we'll take you through a server side rendering example step-by-step. including working around a common roadblock for React apps that talk to APIs.
		在本教程中，我们将逐步介绍服务器端的呈现示例。包括围绕与API交流的React应用程序的共同路障。


		The starter code has just one React component, hello.js, that makes an asynchronous request to the ButterCMS API and renders the returned JSON list of blog posts. ButterCMS is an API-based blog engine that's free for personal use, so it's great for testing out a real-life use case. The starter code comes hooked up with an API token, but if you want you can get your own API token by signing into ButterCMS with your GitHub account.
		提供的代码中只有一个 React 组件，\`hello.js\`，这个文件将向 [ButterCMS](https://buttercms.com/) 发出异步请求，并渲染返回的 JSON 列表的博文。ButterCMS 是一个基于API的博客引擎，可供个人使用，因此它非常适合测试现实生活中的用例。启动代码中连接着一个 API token，如果你想使用你自己的 API token 可以[使用你的 GitHub 账号登入 ButterCMS](https://buttercms.com/home/)。


		我们做到了！在服务器上使用 React 可能很棘手，尤其是从 API 获取数据时。幸运的是，React社区正在蓬勃发展，并创造了许多有用的工具。如果您对构建在客户端和服务器上渲染的大型 React 应用程序的框架感兴趣，请查看 Walmart Labs 的 [Electrode](https://github.com/electrode-io/electrode) 或 [Next.js](https://github.com/zeit/next.js)。或者如果要在 Ruby 中渲染 React ，请查看 AirBnB 的 [Hypernova](https://github.com/airbnb/hypernova) 。


		Next we'll implement server side rendering so that fully generated HTML is sent to the browser. If you want to view all the changes at once, view the diff on GitHub.
		接下来，我们将实现服务器端渲染，以便将完全生成的HTML发送到浏览器。如果要同时查看所有更改，请查看[GitHub上的差异](https://github.com/ButterCMS/react-ssr-example/commit/525c625b0f65489050983ed03b52bb7770ce6b7a)。


		To fix this, we need to make sure the API request completes before the Hello component is rendered. This means making the API request outside of React's component rendering cycle and fetching data before we render the component. We'll take you through this step-by-step, but you can view the complete diff on GitHub.
		要解决这个问题，我们需要在渲染 Hello 组件之前确保 API 请求完成。这意味着要使 API 请求跳出 React 的组件渲染循环，并在渲染组件之前获取数据。我们将逐步介绍这一步，但您可以在[GitHub上查看完整的差异]()https://github.com/ButterCMS/react-ssr-example/commit/5fdd453e31ab08dfdc8b44261696d4ed89fbb719。


		Let's go through how to add server-side rendering to a basic client rendered React app with Babel and Webpack. Our app will have the added complexity of getting the data from a third-party API. We've provided starter code on GitHub where you can see the complete example.
		接下来让我们来看看如何将服务器端渲染添加到一个基本的客户端渲染的使用 Babel 和 Webpack 的 React 应用程序中。我们的应用程序将会因从第三方 API 获取数据而变得有点复杂。我们在GitHub上提供了[相关代码](https://github.com/ButterCMS/react-ssr-example/releases/tag/starter-code)，您可以在其中看到完整的示例。

React 在服务端渲染的实现 #1837

React 在服务端渲染的实现 #1837

Conversation

MuYunyun commented Jul 1, 2017

MuYunyun commented Jul 1, 2017

linhe0x0 commented Jul 1, 2017

xx1124961758 commented Jul 1, 2017

linhe0x0 commented Jul 1, 2017

CACppuccino commented Jul 1, 2017

linhe0x0 commented Jul 1, 2017

CACppuccino left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CACppuccino commented Jul 1, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MuYunyun commented Jul 3, 2017

linhe0x0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MuYunyun commented Jul 3, 2017

linhe0x0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

linhe0x0 commented Jul 4, 2017

MuYunyun commented Jul 4, 2017

MuYunyun commented Jul 4, 2017

linhe0x0 commented Jul 4, 2017