React在服務端渲染的示例分析

這篇文章給大家分享的是有關React在服務端渲染的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

React是最受歡迎的客戶端 JavaScript 框架，但你知道嗎(可以試試)，你可以使用 React 在服務器端進行渲染？

假設你已經(jīng)在客戶端使用 React 構建了一個事件列表 app。該應用程序使用了您最喜歡的服務器端工具構建的API。幾周后，用戶告訴您，他們的頁面沒有顯示在 Google 上，發(fā)布到 Facebook 時也顯示不出來。 這些問題似乎是可以解決的，對吧？

您會發(fā)現(xiàn)，要解決這個問題，需要在初始加載時從服務器渲染 React 頁面，以便來自搜索引擎和社交媒體網(wǎng)站的爬蟲工具可以讀取您的標記。有證據(jù)表明，Google 有時會執(zhí)行 javascript 程序并且對生成的內(nèi)容進行索引，但并不總是的。因此，如果您希望確保與其他服務（如Facebook，Twitter）有良好的SEO兼容性，那么始終建議使用服務器端渲染。

在本教程中，我們將逐步介紹服務器端的呈現(xiàn)示例。包括圍繞與API交流的React應用程序的共同路障。
 在本教程中，我們將逐步向您介紹服務器端的渲染示例。包括圍繞著 APIS 交流一些在服務端渲染 React 應用程序的共同障礙。

服務端渲染的優(yōu)勢

可能您的團隊談論到服務端渲染的好處是首先會想到 SEO，但這并不是唯一的潛在好處。

更大的好處如下：服務器端渲染能更快地顯示頁面。使用服務器端渲染，您的服務器對瀏覽器進行響應是在您的 HTML 頁面可以渲染的時候，因此瀏覽器可以不用等待所有的 JavaScript 被下載和執(zhí)行就可以開始渲染。當瀏覽器下載并執(zhí)行頁面所需的 JavaScript 和其他資源時，不會出現(xiàn) “白屏” 現(xiàn)象，而 “白屏” 這是在完全有客戶端呈現(xiàn)的 React 網(wǎng)站中可能發(fā)生的情況。

入門

接下來讓我們來看看如何將服務器端渲染添加到一個基本的客戶端渲染的使用Babel和Webpack的React應用程序中。我們的應用程序?qū)⒃黾訌牡谌?API 獲取數(shù)據(jù)的復雜性。我們在GitHub上提供了相關代碼，您可以在其中看到完整的示例。

提供的代碼中只有一個 React 組件，`hello.js`，這個文件將向 ButterCMS 發(fā)出異步請求，并渲染返回的 JSON 列表的博文。ButterCMS 是一個基于API的博客引擎，可供個人使用，因此它非常適合測試現(xiàn)實生活中的用例。啟動代碼中連接著一個 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 (
    <div>
     {this.state.resp.data.map((post) => {
      return (
       <div key={post.slug}>{post.title}</div>
      )
     })}
    </div>
   );
  } else {
   return <div>Loading...</div>;
  }
 }
});

export default Hello;

啟動器代碼中包含以下內(nèi)容：

1. package.json - 依賴項

2. Webpack 和 Babel 配置

3. index.html - app 的 HTML 文件

4. index.js - 加載 React 并渲染 Hello 組件

要使應用運行，請先克隆資源庫：

git clone ...
cd ..

安裝依賴:

npm install

然后啟動服務器:

npm run start

瀏覽器輸入 http://localhost:8000 可以看到這個 app: (這里譯者進行補充，package.json 里的 start 命令改為如下："start": webpack-dev-server --watch)

如果您查看渲染頁面的源代碼，您將看到發(fā)送到瀏覽器的標記只是一個到 JavaScript 文件的鏈接。這意味著頁面的內(nèi)容不能保證被搜索引擎和社交媒體平臺抓取:

增加服務器端渲染

接下來，我們將實現(xiàn)服務器端渲染，以便將完全生成的HTML發(fā)送到瀏覽器。如果要同時查看所有更改，請查看GitHub上的差異。

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

開始前，讓我們安裝 Express，一個 Node.js 的服務器端應用程序框架：

npm install express --save

我們要創(chuàng)建一個渲染我們的 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(<Hello />);

 // 加載 index.html 的內(nèi)容
 fs.readFile('./index.html', 'utf8', function (err, data) {
  if (err) throw err;

  // 把渲染后的 React HTML 插入到 div 中
  const document = data.replace(/<div id="app"><\/div>/, `<div id="app">${html}</div>`);

  // 把響應傳回給客戶端
  res.send(document);
 });
}

const app = express();

// 服務器使用 static 中間件構建 build 路徑
app.use('/build', express.static(path.join(__dirname, 'build')));

// 使用我們的 handleRender 中間件處理服務端請求
app.get('*', handleRender);

// 啟動服務器
app.listen(3000);

讓我們分解下程序看看發(fā)生了什么事情...

handleRender 函數(shù)處理所有請求。在文件頂部導入的ReactDOMServer 類提供了將 React 節(jié)點渲染成其初始 HTML 的 renderToString() 方法

ReactDOMServer.renderToString(<Hello />);

這將返回 Hello 組件的 HTML ，我們將其注入到 index.html 的 HTML 中，從而生成服務器上頁面的完整 HTML 。

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:

要啟動服務器，請更新 `package.json` 中的起始腳本，然后運行 npm run start :

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

瀏覽 http://localhost:3000 查看應用程序。瞧！您的頁面現(xiàn)在正在從服務器渲染出來了。但是有個問題，如果您在瀏覽器中查看頁面源碼，您會注意到博客文章仍未包含在回復中。這是怎么回事？如果我們在Chrome中打開網(wǎng)絡標簽，我們會看到客戶端上發(fā)生API請求。

雖然我們在服務器上渲染了 React 組件，但是 API 請求在 componentWillMount 中異步生成，并且組件在請求完成之前渲染。所以即使我們已經(jīng)在服務器上完成渲染，但我們只是完成了部分。事實上，React repo 有一個 issue，超過 100 條評論討論了這個問題和各種解決方法。

在渲染之前獲取數(shù)據(jù)

要解決這個問題，我們需要在渲染 Hello 組件之前確保 API 請求完成。這意味著要使 API 請求跳出 React 的組件渲染循環(huán)，并在渲染組件之前獲取數(shù)據(jù)。我們將逐步介紹這一步，但您可以在GitHub上查看完整的差異。

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

要在渲染之前獲取數(shù)據(jù)，我們需安裝 react-transmit：

npm install react-transmit --save

React Transmit 給了我們優(yōu)雅的包裝器組件（通常稱為“高階組件”），用于獲取在客戶端和服務器上工作的數(shù)據(jù)。

這是我們使用 react-transmit 后的組件的代碼：

import React from 'react';
import Butter from 'buttercms'
import Transmit from 'react-transmit';

const butter = Butter('b60a008584313ed21803780bc9208557b3b49fbb');

var Hello = React.createClass({
 render: function() {
  if (this.props.posts) {
   return (
    <div>
     {this.props.posts.data.map((post) => {
      return (
       <div key={post.slug}>{post.title}</div>
      )
     })}
    </div>
   );
  } else {
   return <div>Loading...</div>;
  }
 }
});

export default Transmit.createContainer(Hello, {
 // 必須設定 initiallVariables 和 ftagments ,否則渲染時會報錯
 initialVariables: {},
 // 定義的方法名將成為 Transmit props 的名稱
 fragments: {
  posts() {
   return butter.post.list().then((resp) => resp.data);
  }
 }
});

我們已經(jīng)使用 Transmit.createContainer 將我們的組件包裝在一個高級組件中，該組件可以用來獲取數(shù)據(jù)。我們在 React 組件中刪除了生命周期方法，因為無需兩次獲取數(shù)據(jù)。同時我們把 render 方法中的 state 替換成 props，因為 React Transmit 將數(shù)據(jù)作為 props 傳遞給組件。

為了確保服務器在渲染之前獲取數(shù)據(jù)，我們導入 Transmit 并使用 Transmit.renderToString 而不是 ReactDOM.renderToString 方法

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';
import Transmit from 'react-transmit';

function handleRender(req, res) {
 Transmit.renderToString(Hello).then(({reactString, reactData}) => {
  fs.readFile('./index.html', 'utf8', function (err, data) {
   if (err) throw err;

   const document = data.replace(/<div id="app"><\/div>/, `<div id="app">${reactString}</div>`);
   const output = Transmit.injectIntoMarkup(document, reactData, ['/build/client.js']);

   res.send(document);
  });
 });
}

const app = express();

// 服務器使用 static 中間件構建 build 路徑
app.use('/build', express.static(path.join(__dirname, 'build')));

// 使用我們的 handleRender 中間件處理服務端請求
app.get('*', handleRender);

// 啟動服務器
app.listen(3000);

重新啟動服務器瀏覽到 http://localhost：3000。查看頁面源代碼，您將看到該頁面現(xiàn)在完全呈現(xiàn)在服務器上！

感謝各位的閱讀！關于“React在服務端渲染的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！