Next.jsのApp Routerを使うメリットについて解説

Next.jsのApp Routerを使うメリットについて解説

作成日: 2023-6-4

更新日: 2023-10-9

Server Components Client Components
サーバ上でのデータ取得 できる できない
サーバ上での機密情報の管理 できる できない
クライアントサイドでのJavaScriptを減らすこと できる できない
onClickやonChange等のイベント できない できる
useStateやuseEffectの実行 できない できる
ブラウザでのAPIリクエストの実行 できない できる
Reactのカスタムフック できない できる
Reactのclass component できない できる
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することで利用できる