パフォーマンス観点でみる Next.js の getLayout

BRANK

Next.js は、ページ単位でデータ取得・レンダリング手法を選べる事が利点です。そして、ページ単位でチャンクファイルが生成される事が、パフォーマンスに貢献します。これはあるページに来訪した際、必要最低限のファイルロードで済むということです。このロード時間（ファイルサイズ）が、ユーザー操作が開始できるまでの時間に繋がります。Next.js でコーディングしていれば意識せずとも、ファイル分割の最適化は適用されます。これだけでも、SPA 構築に Next.js を選ぶ理由にもなりえるでしょう。 First Load JS shared by all_appは、どのページにアクセス・ナビゲーションしても、必ず通過します。そのため、+ First Load JS shared by allとして、全てのページで必要なファイルとして読み込まれます。next buildでビルド完了後、チャンクファイルサイズの一覧が出力されます。以下のchunks/pages/_app-389b549c2fab3b3b.js（23.3 kB）がその出力結果です。+ First Load JS shared by all 97.7 kB ├ chunks/framework-1f10003e17636e37.js 45 kB ├ chunks/main-fc7d2f0e2098927e.js 28.7 kB ├ chunks/pages/_app-389b549c2fab3b3b.js …