t0mmy

2020年12月30日に参加

学習履歴詳細

実践Next JS 2章 Server Component とレンダリング 読了

やったこと

  • 実践Next JS 2章 Server Component とレンダリング 読了

学んだこと

Server Component と Client Component

Server Component とは

サーバーサイドでのみ実行されるコンポーネント。
同期/非同期関数 のどちらでも記述できる。
AppRouter 内で実装される React コンポーネントは、デフォルトでは全てのコンポーネントが Server Component として扱われる。

Client 側で実行したくない処理（DB からデータを取得する処理など）は当然として、
ブラウザとサーバー、どちらで実行しても問題ないものは、 とりあえず Server Component として実装すると吉（要件によって異なる）。

Client Component とは

クライアントサイドで実行されるコンポーネント。

use client と明示することで、 Client Component として扱われる。
Client Component として実装するユースケースは、主に以下がある。

  • alert のような、ブラウザの機能を使用するコンポーネント
  • イベントハンドラによる動的処理を実現したいコンポーネント

補足

  • RSC は React Server Component の略
  • Server Component と SSR は別物
  • ハイドレーションとは
    • 事前に生成された HTML に対してイベントハンドラをアタッチしていく処理
  • 画面の初期表示の際に、サーバーから取得したデータを用いて画面の基本的な構造を構築します
  • その後、フロントエンドの JavaScript やフレームワークによって、画面に追加のデータやコンポーネントがダイナミックに挿入されます
  • ユーザーが画面を操作すると、追加のデータやコンポーネントがサーバーから取得され、画面に反映されます

Next JS のキャッシュ

NextJS では、 独自拡張した fetch 関数を使用することで、キャッシュ機能を使用できる。

  • {cache: "no-store"}
    • キャッシュしない
    • 頻繁に更新されるデータなど、キャッシュしたくないデータに対して使用
  • {cache: "force-cache"}
    • キャッシュする
    • 更新される見込みがないデータに対して使用
  • {next: {revalidate: wait_second }
    • wait_second で指定した時間だけキャッシュする
    • 更新頻度がある程度わかっているデータや、正確性が求められない（≒大雑把でよい）データに対して使用
    • ISR (Incremental Static Regeneration) とも密接に関係

デフォルトでは、 {cache: force-cache} 、つまりキャッシュする。

キャッシュデータは、 .next/cache/fetch-cache に保存される。

Route のレンダリング

Routeのレンダリングには、動的レンダリングと静的レンダリングの二種類が存在する。

  • 動的レンダリング ... リクエストの度に、HTMLをレンダリングするレンダリング方針
  • 静的レンダリング ... 事前にHTMLをレンダリングしておき、リクエストに備えるレンダリング方針

これらは、ビルド時にNextJS側で判断してくれる。

Next JSのキャッシュ機能を活かした高速配信を実現するためにも、静的レンダリング+CDN という構成が望ましい。
Next JSでも、まずは静的レンダリングを試みて、ダメだったら動的レンダリングに切り替わる ... という挙動をする。

動的レンダリングの要因は以下のとおり。

  • 動的データ取得の使用
  • HTTPリクエストを参照するような関数の使用
  • Dynamic Segment の使用

用語整理

Client Side Rendering

まっさらな HTML ファイルを用意。
JS で DOM を生成し、HTML にアタッチしていく。

以下のデメリットを抱える。

  • DOM の生成 & アタッチが完了するまで、画面に何も表示されない
  • js ファイルのサイズ次第で、js ファイルのダウンロード時間が無視できないほど長くなる
  • SEO で不利

上記デメリットは、Server Side Rendering によってある程度軽減できる。

Server Side Rendering

「DOM 生成 & HTML へアタッチ処理」の一部分をサーバー側で実行する。
つまり、サーバー側でレンダリング処理の一部を行い、結果をクライアントへ配信する。

Client Side Rendering のデメリットをある程度軽減できる。

Static Site Generator

サーバーへのリクエストに応じて、事前に生成しておいた HTML ファイルを配信する。
動的な JSON ファイル

Astro とか

ハイドレーション

事前に生成された HTML に対してイベントハンドラをアタッチしていく処理。

レンダリングの種類

  • Full CSR... まっさらな HTML & JS
  • CSR with Prerendering... 骨格レベルの HTML は事前にレンダリング (静的 HTML)) & JS
  • Dynamic HTML & JS/DOM...

参考

Next.js

2024年05月19日(日)

2.0時間