🧤

PageルーターとAppルーターのレンダリング

2024/03/11に公開
3

Appルーター

2023年5月にリリースされた Next.js version 13.4 で使用できるようになった新たな機能のReact Server Componentsのおかげで、サーバー側(およびビルド時)のデータ取得がコンポーネント単位でできるように。
コンポーネント毎に"クライアントでレンダリングされるコンポーネント"か、"サーバーサイドでレンダリングされるコンポーネント"を区別できる。

サーバーコンポーネント

クライアントで動的に更新されないものはサーバーコンポーネントとして扱われる。

クライアントコンポーネント

クライアントで動的に更新されるものはサーバーコンポーネントとして扱われる。

Pagesルーター

サーバー側(およびビルド時)のデータ取得がコンポーネント単位ではなくページ単位

クライアントサイドレンダリング

=普通のreactのページ。
全ての表示をクライアント側で生成する。
表示が更新されたりするとJavascriptによって再生成される。必要な部分のみ再レンダリングされるので比較的高速。

スタティックレンダリング

サーバーサイドで一度だけビルド時にレンダリング。その後一切レンダリングが必要ない。なので、完全に静的コンテンツでないといけない。表示が早く、サーバーに負荷がかからない。
getStaticPropsを使うと、ビルド時にgetStaticProps関数が呼ばれ静的値としてキャッシュされる。

ダイナミックレンダリング

クライアントがアクセスするたびにサーバーでレンダリングしてクライアントに送る。
[id]などの、アクセスごとに表示内容が変化するパターン。
getServerSidePropsでクライアントのアクセス毎に得られた値を使って再レンダリングする

Discussion

Honey32Honey32

失礼します。

Pages Router のころは、サーバー側(およびビルド時)のデータ取得がコンポーネント単位ではなくページ単位で、getServerSideProps getStaticProps を使用していました。

App Router になって初めて、サーバー側(およびビルド時)のデータ取得がコンポーネント単位になりました。そして、それを可能にするための技術が React Server Component です。

なので、Pages Router では全てが Client Component で、Server Component が登場しないはずです。

ポピポピポピポピ

すみません、pageルーターとappルーターの目次が逆になっておりました🙇‍♀️コメントで気づきました、ご指摘ありがとうございました。