要點(diǎn)總結(jié)

• React 代碼的服務(wù)端渲染有助於縮短加載時(shí)間並提高 SEO 靈活性，但由於需要在知道所需數(shù)據(jù)之前渲染應(yīng)用程序，因此處理異步 API 可能會面臨挑戰(zhàn)。
• 現(xiàn)有的解決方案，例如 Next.js、Redux Connect 和 react-frontload，在處理服務(wù)端渲染的 React 代碼中的異步 API 時(shí)各有優(yōu)缺點(diǎn)。
• 可以通過執(zhí)行兩次服務(wù)端渲染來實(shí)現(xiàn)自定義解決方案：第一次處理 API 調(diào)用和異步操作，第二次使用獲取的數(shù)據(jù)進(jìn)行最終頁面渲染。
• 自定義解決方案需要仔細(xì)處理組件中的不同狀態(tài)，包括預(yù)取、後取、預(yù)渲染和後端渲染。這可以通過組件代碼中的複雜 if 語句來實(shí)現(xiàn)。
• 自定義解決方案還需要更改 index.html 文件，以便將預(yù)取數(shù)據(jù)作為頁面請求的一部分發(fā)送，並將其添加到搜索和替換中。如果使用腳本標(biāo)籤，則需要進(jìn)行 base-64 編碼。

如果您曾經(jīng)製作過基本的 React 應(yīng)用頁面，它可能會存在 SEO 差和性能問題，尤其是在較慢的設(shè)備上。您可以添加傳統(tǒng)的網(wǎng)頁服務(wù)端渲染（通常使用 NodeJS），但這並非一個(gè)簡單的過程，尤其是在處理異步 API 時(shí)。

服務(wù)端渲染代碼的兩個(gè)主要好處是：

• 加快加載速度
• 提高 SEO 靈活性

請記住，Google 會等待您的 JavaScript 加載，因此標(biāo)題內(nèi)容等簡單內(nèi)容會無問題地更改。 （不過，我無法說明其他搜索引擎的情況，或者這有多可靠。）

在這篇文章中，我將討論在使用服務(wù)端渲染的 React 代碼時(shí)如何從異步 API 獲取數(shù)據(jù)。 React 代碼具有內(nèi)置於 JavaScript 中的整個(gè)應(yīng)用程序結(jié)構(gòu)。這意味著，與具有控制器的傳統(tǒng) MVC 模式不同，您在應(yīng)用程序渲染之前不知道需要什麼數(shù)據(jù)。使用像 Create React App 這樣的框架，您可以快速創(chuàng)建高質(zhì)量的工作應(yīng)用程序，但它要求您僅在客戶端處理渲染。這存在性能問題，以及 SEO/數(shù)據(jù)問題，您可以在其中根據(jù)需要更改頭部。

問題

React 主要同步渲染，因此如果您沒有數(shù)據(jù)，則會渲染加載屏幕並等待數(shù)據(jù)到來。這在服務(wù)器端效果不佳，因?yàn)槟阡秩局安恢佬枰颤N，或者您知道需要什麼，但您已經(jīng)渲染了。

查看此標(biāo)準(zhǔn)渲染方法：

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

問題：

1. 這是一個(gè)尋找根元素的 DOM 渲染。這在我的服務(wù)器上不存在，因此我們必須將其分開。
2. 我們無法訪問主根元素之外的任何內(nèi)容。我們無法設(shè)置 Facebook 標(biāo)籤、標(biāo)題、描述、各種 SEO 標(biāo)籤，並且我們無法控制元素外部的其餘 DOM，尤其是頭部。
3. 我們提供了一些狀態(tài)，但服務(wù)器和客戶端具有不同的狀態(tài)。我們需要考慮如何處理該狀態(tài)（在本例中為 Redux）。

因此，我在這裡使用了兩個(gè)庫，它們非常流行，因此希望它可以應(yīng)用於您使用的其他庫。

Redux：存儲服務(wù)器和客戶端同步的狀態(tài)是一個(gè)噩夢般的問題。它非常昂貴，並且通常會導(dǎo)致複雜的錯(cuò)誤。在服務(wù)器端，理想情況下，除了足以使事情正常工作並正確渲染之外，您不想使用 Redux 做任何事情。 （您仍然可以照常使用它；只需設(shè)置足夠的狀態(tài)使其看起來像客戶端。）如果您想嘗試，請查看各種分佈式系統(tǒng)指南作為起點(diǎn)。

React-Router：僅供參考，這是 v4 版本，這是默認(rèn)安裝的版本，但如果您有較舊的現(xiàn)有項(xiàng)目，則會有很大不同。您需要確保在服務(wù)器端和客戶端處理路由，並且使用 v4——它在這方面非常出色。

畢竟，如果您需要進(jìn)行數(shù)據(jù)庫調(diào)用怎麼辦？這突然成為一個(gè)大問題，因?yàn)樗欠峭降?，並且位於您的組件內(nèi)部。當(dāng)然，這不是一個(gè)新問題：在官方 React 存儲庫中查看它。

您必須進(jìn)行渲染才能確定需要哪些依賴項(xiàng)——這些依賴項(xiàng)需要在運(yùn)行時(shí)確定——並在提供給客戶端之前獲取這些依賴項(xiàng)。

現(xiàn)有解決方案

下面，我將回顧當(dāng)前提供的用於解決此問題的解決方案。

Next.js

在我們開始之前，如果您想要生產(chǎn)環(huán)境的服務(wù)端渲染的 React 代碼或通用應(yīng)用程序，Next.js 是您的理想選擇。它有效、簡潔，並且有 Zeit 支持。

但是，它是有主見的，您必須使用他們的工具鏈，並且他們處理異步數(shù)據(jù)加載的方式不一定那麼靈活。

查看 Next.js 存儲庫文檔中的這段直接複製內(nèi)容：

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

getInitialProps 是關(guān)鍵，它返回一個(gè) promise，該 promise 解析為一個(gè)填充 props 的對象，並且僅在頁面上。最棒的是，這只是內(nèi)置到他們的工具鏈中：添加它即可工作，無需任何工作！

那麼如何獲取數(shù)據(jù)庫數(shù)據(jù)呢？您進(jìn)行 API 調(diào)用。您不想？好吧，太糟糕了。 （好的，您可以添加自定義內(nèi)容，但您必須自己完全實(shí)現(xiàn)它。）但是，如果您考慮一下，這是一個(gè)非常合理且通常來說是良好的實(shí)踐，因?yàn)榉駝t，您的客戶端仍然會進(jìn)行相同的API 調(diào)用，並且服務(wù)器上的延遲幾乎可以忽略不計(jì)。

您還可以訪問的內(nèi)容受到限制——幾乎只是請求對象；同樣，這似乎是良好的實(shí)踐，因?yàn)槟鸁o法訪問您的狀態(tài)，而您的狀態(tài)在服務(wù)器和客戶端上本來就不同。哦，如果您之前沒有註意到，它只適用於頂級頁面組件。

Redux Connect

Redux Connect 是一個(gè)非常有主見的服務(wù)器端渲染器，具有不錯(cuò)的理念，但是如果您不使用他們描述的所有工具，這可能不適合您。此包有很多內(nèi)容，但它非常複雜，尚未升級到 React Router v4。有很多設(shè)置，但讓我們來看最重要的部分，只是為了學(xué)習(xí)一些經(jīng)驗(yàn)教訓(xùn)：

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

裝飾器在 JavaScript 中不是標(biāo)準(zhǔn)的。在撰寫本文時(shí)，它們處於第 2 階段，因此請謹(jǐn)慎使用。這只是添加高階組件的另一種方式。這個(gè)想法很簡單：密鑰是傳遞給您的 props 的內(nèi)容，然後您有一系列 promise，它們會解析並傳入。這看起來不錯(cuò)。也許另一種選擇就是這個(gè)：

import React from 'react'
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers['user-agent'] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return <div>
      Hello World {this.props.userAgent}
    </div>
  }
}

使用 JavaScript 可以做到這一點(diǎn)，而且不會出現(xiàn)太多問題。

react-frontload

react-frontload 存儲庫沒有很多文檔或解釋，但我所能獲得的最佳理解可能來自測試（例如這個(gè)測試）和閱讀源代碼。當(dāng)某些內(nèi)容被掛載時(shí)，它會被添加到 promise 隊(duì)列中，當(dāng)該隊(duì)列解析時(shí)，它會被提供服務(wù)。它所做的事情非常好，儘管很難推薦一些沒有良好文檔、維護(hù)或使用的內(nèi)容：

// 1. 連接您的數(shù)據(jù)，類似于 react-redux @connect
@asyncConnect([{
  key: 'lunch',
  promise: ({ params, helpers }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])
class App extends React.Component {
  render() {
    // 2. 將數(shù)據(jù)作為 props 訪問
    const lunch = this.props.lunch
    return (
      <div>{lunch.name}</div>
    )
  }
}

尋找更好的解決方案

以上解決方案都沒有真正符合我對庫的靈活性和簡單性的期望，因此我現(xiàn)在將介紹我自己的實(shí)現(xiàn)。目標(biāo)不是編寫包，而是讓您了解如何根據(jù)您的用例編寫自己的包。

此示例解決方案的存儲庫位於此處。

理論

其背後的想法相對簡單，儘管最終會產(chǎn)生相當(dāng)多的代碼。這是為了概述我們正在討論的想法。

服務(wù)器必須渲染 React 代碼兩次，我們只會為此使用 renderToString。我們希望在第一次和第二次渲染之間保持上下文。在我們的第一次渲染中，我們試圖消除任何 API 調(diào)用、promise 和異步操作。在我們的第二次渲染中，我們希望獲取我們獲得的所有數(shù)據(jù)並將其放回我們的上下文中，從而渲染我們的工作頁面以進(jìn)行分發(fā)。這也意味著應(yīng)用程序代碼需要根據(jù)上下文執(zhí)行操作（或不執(zhí)行操作），例如是否在服務(wù)器上或?yàn)g覽器上，以及在任一情況下是否正在獲取數(shù)據(jù)。

此外，我們可以根據(jù)需要自定義它。在本例中，我們根據(jù)上下文更改狀態(tài)代碼和頭部。

第一次渲染

在您的代碼中，您需要知道您是在服務(wù)器上還是在瀏覽器上工作，理想情況下，您希望對它進(jìn)行複雜控制。使用 React Router，您可以獲得一個(gè)靜態(tài)上下文 prop，這很棒，所以我們將使用它。目前，我們只是添加了一個(gè)數(shù)據(jù)對象和請求數(shù)據(jù)，正如我們從 Next.js中學(xué)到的那樣。我們的 API 在服務(wù)器和客戶端之間有所不同，因此您需要提供一個(gè)服務(wù)器 API，最好與您的客戶端 API 具有相似的接口：

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

第二次渲染

在第一次渲染之後，我們將獲取那些掛起的 promise 並等待這些 promise 完成，然後重新渲染，更新上下文：

import React from 'react'
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers['user-agent'] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return <div>
      Hello World {this.props.userAgent}
    </div>
  }
}

App

快速從我們的服務(wù)器跳轉(zhuǎn)到應(yīng)用程序代碼：在我們?nèi)魏尉哂新酚善鬟B接的組件中，我們現(xiàn)在都可以獲得它：

// 1. 連接您的數(shù)據(jù)，類似于 react-redux @connect
@asyncConnect([{
  key: 'lunch',
  promise: ({ params, helpers }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])
class App extends React.Component {
  render() {
    // 2. 將數(shù)據(jù)作為 props 訪問
    const lunch = this.props.lunch
    return (
      <div>{lunch.name}</div>
    )
  }
}

哇，這有很多複雜的代碼。在這個(gè)階段，您可能想要採用更具中繼的方法，在該方法中，您將數(shù)據(jù)獲取代碼分離到另一個(gè)組件中。

此組件由您可能熟悉的組件構(gòu)成——渲染步驟和 componentWillMount 步驟。四階段 if 語句處理不同的狀態(tài)——預(yù)取、後取、預(yù)渲染和後端渲染。我們還在數(shù)據(jù)加載後添加到頭部。

最後，還有一個(gè)獲取數(shù)據(jù)步驟。理想情況下，您的 API 和數(shù)據(jù)庫具有相同的 API，這使得執(zhí)行相同。您可能希望將這些放入 Thunk 或 Saga 中的操作中，以使其更具可擴(kuò)展性。

查看文章“服務(wù)端 React 渲染”和存儲庫 React 服務(wù)端渲染以了解更多信息。請記住，您仍然需要處理數(shù)據(jù)未加載的狀態(tài)！您只會在第一次加載時(shí)進(jìn)行服務(wù)器端渲染，因此您將在後續(xù)頁面上顯示加載屏幕。

更改 index.html 以添加數(shù)據(jù)

我們需要將任何預(yù)取數(shù)據(jù)作為頁面請求的一部分發(fā)送，因此我們將添加一個(gè)腳本標(biāo)籤：

@asyncConnect([{
  lunch: ({ params, helpers }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])

服務(wù)

然後我們需要將其添加到我們的搜索和替換中。但是，HTML 使用非?；镜哪_本標(biāo)籤查找器，因此如果您有腳本標(biāo)籤，則需要對其進(jìn)行 base-64 編碼。此外，不要忘記我們的頭部標(biāo)籤！

const App = () => (
  <frontload>isServer</frontload>
    <component1> entityId='1' store={store}></component1>
  >
)

return frontloadServerRender(() => (
  render(<app></app>)
)).then((serverRenderedMarkup) => {
  console.log(serverRenderedMarkup)
})

我們還處理狀態(tài)代碼更改——例如，對於 404——因此，如果您有 404 頁面，您可以這樣做：

const context = {data: {}, head: [], req, api}
const store = configureStore()
renderToString(
  <provider> store={store}></provider>
    <staticrouter> location={req.url} context={context}>
      <app></app>
    >
  >
)

總結(jié)

如果您不確定自己在做什麼，只需使用 Next.js。它專為服務(wù)端渲染和通用應(yīng)用程序而設(shè)計(jì)，或者如果您希望手動執(zhí)行所有操作的靈活性，則可以按照您想要的方式進(jìn)行。一個(gè)例子可能包括您在子組件中而不是在頁面級別進(jìn)行數(shù)據(jù)獲取。

希望本文能幫助您入門！不要忘記查看 GitHub 存儲庫以獲取可行的實(shí)現(xiàn)。

關(guān)於異步 API 和服務(wù)端渲染 React 的常見問題解答 (FAQ)

服務(wù)端渲染和客戶端渲染在 React 中有什麼區(qū)別？

服務(wù)端渲染 (SSR) 和客戶端渲染 (CSR) 是渲染網(wǎng)頁的兩種不同方法。在 SSR 中，服務(wù)器會響應(yīng)請求生成頁面的完整 HTML，然後將其發(fā)送到客戶端。這會導(dǎo)致更快的初始頁面加載時(shí)間，並且有利於 SEO。但是，這可能會導(dǎo)致頁面轉(zhuǎn)換速度變慢，因?yàn)槊看握埱蠖夹枰秩菊麄€(gè)頁面。另一方面，CSR 意味著渲染是在瀏覽器中使用 JavaScript 進(jìn)行的。這會導(dǎo)致初始頁面加載時(shí)間變慢，但頁面轉(zhuǎn)換速度更快，因?yàn)橹恍枰匦落秩颈匾慕M件。

如何在我的客戶端渲染的 React 應(yīng)用程序中發(fā)出服務(wù)器端請求？

要在客戶端渲染的 React 應(yīng)用程序中發(fā)出服務(wù)器端請求，您可以使用 fetch API 或 axios 等庫。您可以在 componentDidMount 生命週期方法中或在使用函數(shù)組件時(shí)在 useEffect 掛鉤內(nèi)發(fā)出請求。然後可以將響應(yīng)設(shè)置為狀態(tài)並在您的組件中使用。

為什麼我的全局變量在 React 中執(zhí)行兩次？

這可能是由於 React 批處理狀態(tài)更新的方式造成的。如果您在 React 組件內(nèi)更新全局變量，則由於 setState 的異步性質(zhì)，它可能會更新兩次。為避免這種情況，您可以使用 setState 的函數(shù)形式，這可以確保狀態(tài)更新基於先前狀態(tài)，而不是當(dāng)前狀態(tài)。

如何在服務(wù)端渲染的 React 中使用異步 API？

要在服務(wù)端渲染的 React 中使用異步 API，您可以在服務(wù)器端代碼中使用 async/await 語法。這允許您在渲染頁面之前等待 API 響應(yīng)。您可以使用 axios 等庫來發(fā)出 API 請求。

服務(wù)端渲染在 React 中有哪些好處？

服務(wù)端渲染在 React 中有很多好處。它提高了初始頁面加載時(shí)間，這可以帶來更好的用戶體驗(yàn)。它還提高了 SEO，因?yàn)樗阉饕媾老x可以更容易地索引服務(wù)端渲染的內(nèi)容。此外，它允許更一致的初始狀態(tài)，因?yàn)橄嗤拇a在服務(wù)器和客戶端上運(yùn)行。

如何在使用服務(wù)端渲染的 React 中的異步 API 時(shí)處理錯(cuò)誤？

您可以使用 try/catch 塊在異步函數(shù)中處理錯(cuò)誤。這允許您捕獲在發(fā)出 API 請求時(shí)發(fā)生的任何錯(cuò)誤並適當(dāng)?shù)靥幚硭鼈?，例如通過渲染錯(cuò)誤消息。

我可以在服務(wù)端渲染的 React 中使用鉤子嗎？

是的，您可以在服務(wù)端渲染的 React 中使用鉤子。但是，請記住，鉤子只能在函數(shù)組件中使用，而不能在類組件中使用。此外，某些鉤子（例如 useEffect）不會在服務(wù)器上運(yùn)行，因此您需要確保您的代碼可以處理這種情況。

如何提高服務(wù)端渲染的 React 應(yīng)用程序的性能？

提高服務(wù)端渲染的 React 應(yīng)用程序性能的方法有很多。您可以使用代碼分割，只為每個(gè)頁面加載必要的代碼。您還可以使用緩存來避免重新渲染未更改的頁面。此外，優(yōu)化服務(wù)器端代碼可以幫助提高性能。

如何測試我的服務(wù)端渲染的 React 應(yīng)用程序？

您可以使用 Jest 和 React Testing Library 等測試庫來測試您的服務(wù)端渲染的 React 應(yīng)用程序。這些庫允許您隔離測試組件並確保它們正確渲染。

我可以將服務(wù)端渲染與 Next.js 一起使用嗎？

是的，Next.js 是一個(gè)用於 React 的框架，它開箱即用地支持服務(wù)端渲染。它提供了一個(gè)簡單的服務(wù)端渲染 API，還支持靜態(tài)站點(diǎn)生成和客戶端渲染。

以上是處理服務(wù)器渲染的反應(yīng)中的異步API的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！