Next.jsのApp Routerを使うメリットについて解説
作成日: 2023-6-4
更新日: 2023-10-9
- この記事を読んだ後に理解できること
- App Routerとは？
- App Routerを使うメリットとは？
- Client Componentとは
- Server Componentsとは
- Server Componentでできること・Client Componentでできること
- Server Componentsの生成が実行されるタイミングについて
- なぜServer Componentsを使う必要があるのか
- Next.js12以前と比較して理解するServer Components
- さいごに
目次
| Nextjs13 | Next.js12以前 | 特徴等 |
|---|---|---|
| Static Rendering | Static Site Generation（SSG） | ビルド時にページ単位でデータの取得、HTML、CSSの組み立て、生成を行う |
| Static Data Fetching | getStaticProps | ページのコンポーネントでgetStaticProps関数をexportすることで利用できる |
| revalidate | revalidate | 挙動はNext.js13と同じだがこれもページ単位でのみ動作する。getStaticProps関数のオプション引数として設定する。 |
| Dynamic Rendering | Server Side Rendering（SSR） | リクエスト時にページ単位でデータの取得、HTML、CSSの組み立て、生成を行う |
| Dynamic Data Fetching | getServerSideProps | ページのコンポーネントでgetServerSideProps関数をexportすることで利用できる |
