next.jsのサーバーサイドレンダリング（SSR）は、各リクエストに対してサーバー上のHTMLを生成し、パフォーマンスとSEOを改善します。 1。SSRは、ユーザーダッシュボードなど、頻繁に変更される動(dòng)的なコンテンツに最適です。 2。GetServerSidePropsを使用して、要求ごとにデータを取得し、コンポーネントに渡します。 3.データを最新の狀態(tài)にする必要がある場(chǎng)合、ユーザー認(rèn)証チェック、またはSEOの目的でSSRを使用します。 4。SSGおよびCSRと比較して、SSRは動(dòng)的データに最適ですが、より多くのサーバーリソースが必要です。 5.潛在的な欠點(diǎn)には、データフェッチの待機(jī)によるサーバーの負(fù)荷と負(fù)荷時(shí)間の遅い時(shí)間が含まれます。これは、最適化とキャッシュ戦略を通じて軽減できます。

サーバーサイドレンダリング（SSR）は、next.jsの強(qiáng)力な機(jī)能であり、リクエストごとにサーバーでHTMLを生成できるようにします。これは、ユーザーがすぐに完全にレンダリングされたページを取得することを意味します。これは、クライアント側(cè)のレンダリングと比較して、パフォーマンスとSEOに役立ちます。

next.jsでのサーバー側(cè)のレンダリングとは何ですか？

簡(jiǎn)単に言えば、next.jsのSSRは、誰(shuí)かが訪問(wèn)するたびにページコンテンツがサーバー上に構(gòu)築されることを意味します。ページが1回作成され、キャッシュから提供される靜的生成とは異なり、SSRはすべてのリクエストでコードを?qū)g行します。これにより、ユーザーダッシュボードや頻繁に変更されるページなどの動(dòng)的なコンテンツに最適です。

next.jsでSSRを使用するには、ページからgetServerSidePropsという関數(shù)をエクスポートします。この関數(shù)は、ページが要求されたときにデータを取得し、コンポーネントへの小道具として渡します。

これが基本的な例です。

 async関數(shù)getserversideprops（）{
  const res = await fetch（ 'https://api.example.com/data'）;
  const data = await res.json（）;

  return {props：{data}};
}

これにより、ページはロードするたびに新鮮なデータを取得します。古いコンテンツはありません。

サーバー側(cè)のレンダリングはいつ使用する必要がありますか？

次の場(chǎng)合はSSRを使用したいと思います。

• データは頻繁に変更され、訪問(wèn)ごとに最新の狀態(tài)である必要があります。
• ページを表示する前に、リアルタイムユーザー認(rèn)証チェックが必要です。
• SEOの問(wèn)題とコンテンツは、検索エンジンが適切にインデックスを付けるためにサーバー側(cè)にレンダリングする必要があります。

たとえば、パーソナライズされた分析を示すダッシュボードを構(gòu)築している場(chǎng)合、SSRは、ページレンダリング後にJavaScriptに依存することなく、數(shù)値が常に最新であることを保証します。

一般的なユースケースには次のものが含まれます。

• ユーザープロファイル
• 結(jié)果ページを検索します
• ログインウォールの背後にあるページ

常に最良の選択ではありません。データがあまり変わらない場(chǎng)合、靜的生成（ getStaticProps ）がより効率的になる可能性があります。

SSRは他のレンダリング方法とどのように比較されますか？

next.jsは、レンダリングのためのいくつかのオプションを提供します：SSR、靜的生成（SSG）、およびクライアント側(cè)レンダリング（CSR）。これらがどのように積み重ねるかは次のとおりです。

• 靜的生成（SSG）：
  ページはビルド時(shí)に構(gòu)築され、キャッシュされます。頻繁に変更されないブログやマーケティングページに最適です。

• サーバー側(cè)のレンダリング（SSR）：
  リクエストごとにページが生成されます。動(dòng)的データに最適ですが、サーバーコストが高くなります。

• クライアント側(cè)のレンダリング（CSR）：
  JavaScriptがブラウザで実行された後のコンテンツロード。インタラクティブなアプリには適していますが、SEOと初期負(fù)荷體験を傷つけます。

SSGとSSRを決定しようとしている場(chǎng)合は、自問(wèn)してみてください。このページは、訪問(wèn)ごとに異なるコンテンツを表示する必要がありますか？はいの場(chǎng)合、SSRを使用してください。

SSRで注意すべきこと

多くの人が見(jiàn)落としていることの1つは、すべてのリクエストでコードを?qū)g行するため、SSRがサーバーにロードを追加できることです。したがって、交通量が多い場(chǎng)合は、バックエンドが頻繁に通話を処理できることを確認(rèn)するか、キャッシュ戦略を検討してください。

また、ページはレンダリングの前にgetServerSideProps終了するのを待っているため、遅いAPI呼び出しは負(fù)荷時(shí)間に直接影響を與えます。あなたは物事をスピードアップすることができます：

• APIエンドポイントを最適化します
• getServerSideProps內(nèi)でキャッシュを使用します
• 不要なデータフェッチを回避します

別の小さなゴッチャ： getServerSideProps 、コンポーネントではなくページでのみ機(jī)能します。したがって、再利用可能なコンポーネント內(nèi)でデータを取得しようとしている場(chǎng)合は、クライアント側(cè)でSWRやReactクエリを使用するなど、異なる方法で実行する必要があります。

基本上就這些。

以上がnext.jsを使用したサーバー側(cè)のレンダリングが説明されましたの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。