Skip to main content

Next.js Rendering

Overview​

Next.jsのレンダリングに関するまとめセクション。
Next.jsはReactを基盤にしているため、より詳細に理解したい場合はReactを参照してください。

データフェッチ仕組み​

SSGとSSRの違い
リファレンス

Next.jsでは、ブラウザへ送信する前にpre-Renderingをおこなっている。

CSR​

CSRのデータフェッチは相対パスでもいい。

SSR​

SSRのデータフェッチが絶対パスではないといけない理由。

エラーではありません。isomorphic-unfetch は SSR モードで実行されているため、Node.js はそこから取得する絶対 URL を知る必要があります。これは、バックエンドがブラウザーの設定を認識していないためです。

SSRとSSGについて​

参考URL

Nextでクエリ文字列を使いたい時は getServerSideProps を使う getStaticProps では使えない。

SSRフロー​

参考URL

  1. ブラウザからサーバー（Node.js）へリクエスト
  2. サーバー（Node.js）で HTML をレンダリングしてブラウザに返却
  3. 動的なデータが含まれる場合はgetServerSideProps()でApiサーバーリクエスト
  4. 動的なデータがない場合は HTML をそのままブラウザに返却

SSR回避させる​

SSR回避 実装パターン集

getServerSidePropsが実行されるタイミング​

リファレンス

参考URL

  • /nowへ直接アクセス http://localhost:3000/now に直接アクセスします。 返ってくるHTMLは getServerSideProps の処理が実行され、取得したデータが埋め込まれています。

  • / から /nowへ <Link> で遷移 getServerSidePropsはクライアントサイドルーティングでページにアクセスした場合も実行されます。 このときgetServerSidePropsの実行結果は JSON で返ってくる。

CSR と SSRのデータフェッチ違い​

参考URL

SSG​

Static（通称SSG、SG）を利用するメリット
CDNに静的ファイルをキャッシュすることで表示のスピードUPを実現。

ISG（Incremental Static Generation）​

Link と ISR が引き起こす Next.js の過負荷

ISG（Incremental Static Generation）は、Next.jsがオンデマンドでページを静的生成するアプローチです。「オンデマンドで静的生成する」ことで、ビルドタイムの静的生成をスキップできる。 ※膨大なDynamic routeを提供するページであっても静的生成を現実的なものにする。実際にページがリクエストされるまでそのページは静的生成されない

  • 発動条件 getStaticPaths の fallback オプションを true か 'blocking' にすることで発動する

LinkとISGの関係​

実行されるタイミングは以下となる。

  1. ページが直叩きされたとき
  2. Link コンポーネントにマウスオーバーした時
  3. Link コンポーネントが画面内に入った時（prefetch=時）

ISR（Incremental Static Regeneration）​

ISGの「再生成が起こらない」課題を解決するアプローチ（データ陳腐化防止） revalidate オプションを付与することで、一度生成したページであっても、指定経過時間後に再生成を試む。 revalidate オプションの付与でISGはISRになるが、あまりにも短い指定をするとタイトルのような過負荷を引き起こすことが懸念されます。

LinkとISRの関係​

Serverless Componentsでdeployした場合のLambda@Edge レスポンス制限​

海外の方記事

ISR(Incremental Static Regeneration)​

リファレンス
Next ISRで動的コンテンツをキャッシュするときの戦略

ISRとは、動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になる。 ISRを使うことで動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になる。Next.jsのISRはドキュメントに書かれているようにstale-while-revalidateという考え方でキャッシュが行われる。 具体的には、リクエスト時にページのキャッシュを作成し、次のアクセスではキャッシュされた古いデータを返します。その裏で次のアクセスに向けてキャッシュが再生成されるというイメージです。

getStaticProps単体だと長期間キャッシュされる静的なページが出力される（いわゆるSSGというやつ）ここに revalidate を追加するとISRになる。

revalidate: 10 の挙動は以下

  • キャッシュが作られた後、10秒間はそのキャッシュを返し続ける（10秒以内に100回アクセスされてもキャッシュの再生成はされない）
  • 10秒経ったあとはキャッシュが古くなったとみなされる。ただし次のリクエストでもいったんはそのキャッシュを返す（1時間後にアクセスがあった場合もいったん古いキャッシュを返す）
    • その裏でキャッシュを再生成する
    • その次のリクエストでは再生成されたキャッシュを返す
export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = await getPosts();
  return {
    props: {
      posts,
    },
    revalidate: 10 // 👈 ポイント
  };
};

Next.js 12 の React Server Components​

(React Server Componentsを使用すると、対象のコンポーネント自体を含むすべてをサーバでレンダリングすることができます。これは、サーバ上でHTMLを生成する従来のSSRとは根本的に異なります。サーバコンポーネントを使用すると、クライアント側のJavaScriptが不要になり、ページのレンダリングが高速になります。これによりサーバレンダリングの良いところとクライアントサイドのインタラクティブ性を組み合わせて、アプリケーションのUXを向上させることができます。)

参考URL 参考URL

Next.jsのReact Server Componentsは、本家（Facebook）のReact Server Components (demo) よりも、実用的で使いやすくなっている。

Resource​

React Server Componentsを理解したい