キーポイントの概要

概要

• Reactコードのサーバー側(cè)のレンダリングは、読み込み時(shí)間を短縮し、SEOの柔軟性を向上させるのに役立ちますが、必要なデータを知る前にアプリケーションをレンダリングする必要があるため、非同期APIの処理は困難です。
• next.js、Redux Connect、React-Frontloadなどの既存のソリューションには、サーバーレンダリングされたReactコードで非同期APIを扱う際の獨(dú)自の利點(diǎn)と短所があります。
カスタマイズされたソリューションは、2つのサーバー側(cè)のレンダリングを?qū)g行することで実裝できます。API呼び出しと非同期操作を初めて処理し、2回目は最終ページレンダリングの取得データを使用します。
カスタマイズソリューションでは、プリフェッチ、ポストフェッチ、プリレンダー、バックエンドのレンダリングなど、コンポーネント內(nèi)のさまざまな狀態(tài)を慎重に処理する必要があります。これは、コンポーネントコードのステートメントの場(chǎng)合、複雑な場(chǎng)合によって達(dá)成できます。
• また、カスタマイズされたソリューションでは、Pageリクエストの一部としてプリフェッチデータを送信して検索と交換に追加するために、index.htmlファイルを変更する必要があります。スクリプトタグを使用する場(chǎng)合は、ベース64エンコーディングが必要です。
基本的なReactアプリページを作成したことがある場(chǎng)合、特に遅いデバイスでは、SEOとパフォーマンスの問(wèn)題が低下する可能性があります。従來(lái)のWebサーバーレンダリング（通常はnodejsを使用）を追加できますが、これは特に非同期APIを扱う場(chǎng)合は簡(jiǎn)単なプロセスではありません。

サーバー側(cè)のレンダリングコードの2つの主な利點(diǎn)は次のとおりです。

速度を上げる速度

SEOの柔軟性の向上

• GoogleがJavaScriptがロードされるのを待つことを忘れないでください。そのため、タイトルコンテンツなどのシンプルなコンテンツは問(wèn)題なく変更されます。 （しかし、他の検索エンジンで何が起こるか、またはこれがどれほど信頼できるかは言えません。）
この記事では、サーバーレンダリングのReactコードを使用する際に、非同期APIからデータを取得する方法について説明します。 Reactコードには、JavaScriptに組み込まれたアプリケーション構(gòu)造全體があります。これは、コントローラーを使用した従來(lái)のMVCモードとは異なり、アプリケーションがレンダリングする前に必要なデータがわからないことを意味します。 Create Reactアプリなどのフレームワークを使用すると、高品質(zhì)の作業(yè)アプリケーションをすばやく作成できますが、クライアント側(cè)でのみレンダリングを処理する必要があります。これには、パフォーマンスの問(wèn)題と、必要に応じてヘッダーを変更できるSEO/データの問(wèn)題があります。

質(zhì)問(wèn)

Reactは主にレンダリングを同期するため、データがない場(chǎng)合、ロード畫面がレンダリングされ、データが到著するのを待ちます。レンダリングの前に必要なものがわからないか、必要なものがわかっているが、レンダリングしたため、これはサーバー側(cè)ではうまく機(jī)能しません。 この標(biāo)準(zhǔn)レンダリング方法を表示：

質(zhì)問(wèn)：

1. これは、ルート要素を探してレンダリングするDOMです。これは私のサーバーに存在しないため、それを分離する必要があります。
2. メインルート要素の外側(cè)にアクセスすることはできません。 Facebookタグ、タイトル、説明、さまざまなSEOタグを設(shè)定することはできません。また、要素の外側(cè)の殘りのDOM、特にヘッダーを制御することはできません。
3. いくつかの狀態(tài)を提供しますが、サーバーとクライアントには異なる狀態(tài)があります。この狀態(tài)（この場(chǎng)合はredux）に対処する方法を検討する必要があります。

ここで2つのライブラリを使用していたので、非常に人気があるので、使用する他のライブラリに適用できることを願(yuàn)っています。

Redux：ストレージサーバーとクライアントの同期の狀態(tài)は悪夢(mèng)の問(wèn)題です。それは非常に高価であり、多くの場(chǎng)合、複雑なエラーにつながります。サーバー側(cè)では、理想的には、物事を機(jī)能させて正しくレンダリングするのに十分であることを除いて、Reduxで何もしたくありません。 （通常どおり使用できます。クライアントのように見(jiàn)えるように十分な狀態(tài)を設(shè)定するだけです。）試してみたい場(chǎng)合は、さまざまな分散システムガイドを出発點(diǎn)としてチェックしてください。

React-Router：FYI、これはV4バージョンであり、デフォルトのインストールバージョンですが、古い既存のプロジェクトがある場(chǎng)合は非常に異なります。サーバー側(cè)とクライアント側(cè)のルーティングを処理し、V4を使用することを確認(rèn)する必要があります。この點(diǎn)で優(yōu)れています。

結(jié)局のところ、データベース呼び出しを行う必要がある場(chǎng)合はどうなりますか？これは非同期であり、コンポーネントの內(nèi)側(cè)にあるため、突然大きな問(wèn)題になります。もちろん、これは新しい質(zhì)問(wèn)ではありません。公式のReactリポジトリでそれを見(jiàn)る。

必要な依存関係を決定するには、クライアントに提供される前にこれらの依存関係を取得するために必要な依存関係を決定する必要があります。

既存のソリューション

以下では、この問(wèn)題に現(xiàn)在提供されているソリューションを確認(rèn)します。

next.js

開(kāi)始する前に、次の.jsは、サーバー側(cè)のレンダリングされたReactコードまたは生産環(huán)境のユニバーサルアプリケーションを必要とする場(chǎng)合に最適です。効果的で簡(jiǎn)潔で、Zeitのサポートがあります。

しかし、それは意見(jiàn)であり、あなたは彼らのツールチェーンを使用する必要があり、彼らが非同期データロードを処理する方法は必ずしも柔軟ではありません。

next.jsリポジトリドキュメントでコンテンツのこの直接コピーを表示：

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

getInitialPropsが鍵であり、小道具で満たされたオブジェクトに解決され、ページにのみ存在する約束を返します。何よりも、これはツールチェーンに組み込まれています。

では、データベースデータを取得するにはどうすればよいですか？ API呼び出しを行います。したくないの？わかりました、それはひどいです。 （さて、カスタムコンテンツを追加できますが、完全に自分で実裝する必要があります。）しかし、考えてみると、これは非常に合理的で一般的な練習(xí)です。そして、サーバーのレイテンシーはほとんど無(wú)視できます。

また、アクセスできるものは限られています - ほぼリクエストオブジェクトがあります。ああ、あなたが以前にそれに気付いたことがないなら、それはトップレベルのページコンポーネントでのみ動(dòng)作します。

redux connect

Redux Connectは、非常に意見(jiàn)の高いサーバー側(cè)のレンダラーです。このパッケージには多くのコンテンツがありますが、非常に複雑で、React Router V4にアップグレードされていません。多くの設(shè)定がありますが、いくつかのレッスンを?qū)Wぶためだけに、最も重要な部分を見(jiàn)てみましょう：

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

デコレーターはJavaScriptでは標(biāo)準(zhǔn)ではありません。執(zhí)筆時(shí)點(diǎn)では、フェーズ2にあるので、注意して使用してください。これは、高次コンポーネントを追加するもう1つの方法です。アイデアは単純です。キーはあなたの小道具に渡されるものであり、それからあなたは一連の約束を解析して渡すことです。これはよさそうだ。たぶん別のオプションはこれです：

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>
  }
}

これは、あまり多くの問(wèn)題なくJavaScriptで実行できます。

react-frontload

React-Frontloadリポジトリには多くのドキュメントや説明がありませんが、私が得ることができる最良の理解は、テスト（このような）とソースコードの読み取りから來(lái)るかもしれません。何かがマウントされると、それは約束のキューに追加され、キューが解析されると、それは提供されます。それがすることは非常に良いですが、十分に文書(shū)化されていない、維持、使用されていないものを推奨することは困難です。

// 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 訪問(wèn)
    const lunch = this.props.lunch
    return (
      <div>{lunch.name}</div>
    )
  }
}

より良いソリューションを探しています

上記のソリューションはどれも、ライブラリの柔軟性とシンプルさに対する私の期待に本當(dāng)に適合していないので、私は自分の実裝を紹介します。目標(biāo)は、パッケージを書(shū)くことではなく、ユースケースに基づいて獨(dú)自のパッケージを書(shū)く方法のアイデアを提供することです。

この例ソリューションのリポジトリはここにあります。

理論

その背後にあるアイデアは比較的簡(jiǎn)単ですが、最終的にはかなり多くのコードが生成されます。これは、私たちが議論しているアイデアを概説することです。

サーバーはReactコードを2回レンダリングする必要があり、これには

のみを使用します。第1レンダリングと2番目のレンダリングの間のコンテキストを維持したいと考えています。最初のレンダリングでは、API呼び出し、約束、および非同期操作を排除しようとしました。 2回目のレンダリングでは、取得したすべてのデータを取得してコンテキストに戻し、ワーキングページを配布用にレンダリングしたいと考えています。これはまた、アプリケーションコードがコンテキストに基づいてアクションを?qū)g行する必要があることを意味します（またはサーバー上またはブラウザ上にあるかなど、データがフェッチされているかどうかなど、コンテキストに基づいて操作を?qū)g行しません）。 renderToString さらに、必要に応じてカスタマイズできます。この場(chǎng)合、コンテキストに従ってステータスコードとヘッダーを変更します。

最初のレンダリング

コードでは、サーバーで作業(yè)しているのかブラウザで作業(yè)しているのかを知る必要があります。理想的には、それを複雑に制御する必要があります。 React Routerを使用すると、靜的コンテキストプロップを取得できます。これは素晴らしいことですので、使用します?，F(xiàn)在、next.jsから學(xué)んだように、データオブジェクトを追加してデータを要求するだけです。 APIはサーバーとクライアントの間で異なるため、クライアントAPIと同様のインターフェイスを持つことをお?jiǎng)幛幛工毳旦`バーAPIを提供する必要があります。

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

2番目のレンダリング

最初のレンダリングの後、これらの保留中の約束を受け取り、これらの約束が完了し、再レンダリングしてコンテキストを更新するのを待ちます：

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

サーバーからアプリケーションへのすばやくジャンプしてください：ルーター接続を備えたコンポーネントのいずれかで、今すぐ入手できます：

// 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 訪問(wèn)
    const lunch = this.props.lunch
    return (
      <div>{lunch.name}</div>
    )
  }
}

すごい、複雑なコードがたくさんあります。この段階では、データフェッチコードを別のコンポーネントに分離する場(chǎng)所で、よりリレーしたアプローチを取ることができます。

このコンポーネントは、慣れ親しんでいるコンポーネントで構(gòu)成されています - レンダリングステップと

ステップ。 4段階のステートメントが異なる狀態(tài)を処理する場(chǎng)合、侵入、ポストフェッチ、プリレンダー、バックエンドのレンダリング。また、データを読み込んだ後、データをヘッダーに追加します。

componentWillMount最後に、データを取得する別のステップがあります。理想的には、APIとデータベースには同じAPIがあり、実行が同じになります。これらをよりスケーラブルにするために、これらをサンクまたはサガにアクションに入れたいかもしれません。

詳細(xì)については、「サーバーReactレンダリング」とリポジトリReact Serverレンダリングを表示します。データがロードされていない狀態(tài)を処理する必要があることを忘れないでください！最初のロードの場(chǎng)合にのみサーバー側(cè)のレンダリングを行うため、後続のページにロード畫面が表示されます。

index.htmlを変更してデータを追加します

ページリクエストの一部としてプリフェッチされたデータを送信する必要があるため、スクリプトタグを追加します：

service

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

その後、検索と交換に追加する必要があります。ただし、HTMLは非常に基本的なスクリプトタグファインダーを使用するため、スクリプトタグがある場(chǎng)合は、ベース64エンコードする必要があります。また、私たちの頭のラベルを忘れないでください！

また、ステータスコードの変更（たとえば、404の場(chǎng)合）も処理します。したがって、404ページがある場(chǎng)合は、これを行うことができます。

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

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

概要

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

あなたが何をしているのかわからない場(chǎng)合は、next.jsを使用してください。サーバー側(cè)のレンダリングとユニバーサルアプリケーション向けに設(shè)計(jì)されています。または、すべてを手動(dòng)で実行できる柔軟性が必要な場(chǎng)合は、必要な方法で実行できます。例としては、ページレベルではなく、子コンポーネントでデータを取得するデータを?qū)g行することが含まれます。 この記事があなたが始めるのに役立つことを願(yuàn)っています！実行可能な実裝については、githubリポジトリをチェックすることを忘れないでください。

非同期APIおよびサーバー側(cè)のレンダリングReact

についての

FAQ（FAQS）

Reactでのサーバー側(cè)のレンダリングとクライアント側(cè)のレンダリングの違いは何ですか？

サーバー側(cè)のレンダリング（SSR）とクライアント側(cè)のレンダリング（CSR）は、Webページをレンダリングする2つの異なる方法です。 SSRでは、サーバーはリクエストに応じてページの完全なHTMLを生成し、クライアントに送信します。これにより、初期ページの読み込み時(shí)間が短くなり、SEOにとって有益です。ただし、各リクエストでページ全體をレンダリングする必要があるため、これによりページ変換が遅くなる可能性があります。一方、CSRは、JavaScriptを使用してブラウザでレンダリングが行われることを意味します。これにより、最初のページの読み込み時(shí)間が遅くなりますが、必要なコンポーネントのみを再レンダリングする必要があるため、ページ変換はより速くなります。

クライアントがレンダリングされたReactアプリケーションでサーバー側(cè)のリクエストを作成する方法は？

クライアント側(cè)のレンダリングされたReactアプリケーションでサーバー側(cè)のリクエストを行うには、Fetch APIやAxiosなどのライブラリを使用できます。関數(shù)コンポーネントを使用するときに、componentDidMountライフサイクルメソッドまたはuseEffectフックでリクエストを行うことができます。その後、応答は狀態(tài)に設(shè)定し、コンポーネントに使用できます。

なぜ私のグローバル変數(shù)は反応で2回実行されているのですか？

これは、反応バッチ狀態(tài)の更新方法による可能性があります。 Reactコンポーネント內(nèi)のグローバル変數(shù)を更新すると、setStateの非同期性のために2回更新される場(chǎng)合があります。これを回避するために、setStateの関數(shù)形式を使用できます。これにより、狀態(tài)の更新が現(xiàn)在の狀態(tài)ではなく前の狀態(tài)に基づいていることが保証されます。

サーバー側(cè)のレンダリングされたReactで非同期APIを使用する方法は？

サーバー側(cè)のレンダリングされたReactで非同期APIを使用するには、サーバー側(cè)のコードでasync/await構(gòu)文を使用できます。これにより、ページをレンダリングする前にAPI応答を待つことができます。 Axiosなどのライブラリを使用して、API要求を行うことができます。

Reactでのサーバー側(cè)のレンダリングの利點(diǎn)は何ですか？

サーバー側(cè)のレンダリングには、Reactに多くの利點(diǎn)があります。初期ページの読み込み時(shí)間が改善され、ユーザーエクスペリエンスが向上する可能性があります。また、検索エンジンクローラーがサーバー側(cè)のレンダリングコンテンツをより簡(jiǎn)単にインデックスできるため、SEOが改善されます。さらに、サーバーとクライアントの両方で同じコードが実行されるため、より一貫した初期狀態(tài)が可能になります。

サーバーレンダリングReactで非同期APIを使用する場(chǎng)合のエラーを処理する方法は？

try/catchブロックを使用して、非同期関數(shù)のエラーを処理できます。これにより、APIリクエストを作成するときに発生するエラーをキャプチャし、エラーメッセージをレンダリングするなど、適切に処理できます。

サーバー側(cè)のレンダリングされたReactでフックを使用できますか？

はい、サーバーレンダリングReactでフックを使用できます。ただし、フックはクラスコンポーネントではなく、関數(shù)コンポーネントでのみ使用できることを忘れないでください。また、一部のフック（例：useEffect）はサーバーで実行されないため、コードがこの狀況を処理できることを確認(rèn)する必要があります。

サーバー側(cè)のレンダリングされたReactアプリケーションのパフォーマンスを改善する方法は？

サーバーレンダリングのReactアプリケーションのパフォーマンスを改善する方法はたくさんあります。コードセグメンテーションを使用して、各ページに必要なコードのみをロードできます。キャッシュを使用して、変更されていないページの再レンダリングを避けることもできます。さらに、サーバー側(cè)のコードを最適化すると、パフォーマンスの向上に役立ちます。

サーバー側(cè)のレンダリングされたReactアプリケーションをテストする方法は？

JestやReact Testing Libraryなどのテストライブラリを使用して、サーバー側(cè)のレンダリングされたReactアプリケーションをテストできます。これらのライブラリを使用すると、テストコンポーネントを分離し、正しくレンダリングすることを確認(rèn)できます。

next.jsでサーバーレンダリングを使用できますか？

はい、next.jsは、ボックスからレンダリングするサーバー側(cè)をサポートするReactのフレームワークです。シンプルなサーバー側(cè)のレンダリングAPIを提供し、靜的サイトの生成とクライアントレンダリングもサポートします。

以上がサーバーレンダリングの反応で非同期APIを扱うの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。