はじめに
Next.jsはReactと何が違うのか、Next.jsの特徴、
公式チュートリアルで学んだことを自分用のメモとして簡単にまとめます。
以下の記事の続きです。
【初心者向け】 Next.js 公式チュートリアル 学習記録1
Pre-rendering and Data Fetching
Pre-rendering
通常、Next.jsでは事前にすべてのページを静的HTMLレンダリングする。(プレレンダリングする)
ブラウザの負荷を下げられる
→Next.jsではブラウザのJavaScriptを無効にしてもページが表示されるが、Reactでは表示されない。
結果、パフォーマンスとSEOが向上する。
Two Forms of Pre-rendering
事前レンダリングにはStatic GenerationとServer-side Renderingの2つの形式がある。
Static Generation…ビルド時にhtmlをレンダリングする。
Server-side Rendering…リクエスト事にhtmlをレンダリングする。
Next.js では、ページごとに事前レンダリングの形式を選択できる。
ほとんどのページでSG、その他のページではSSRを使用して、ハイブリッドなNext.js アプリを作成できる。
可能な限りSGが望ましい。
SNSや動画配信アプリなど、リアルタイムであることが重視されるものはSSGで作成するとよい。
データの取得あるなしにかかわらず、SGを実行できる。
データを取得する場合は、「getStaticProps」を用いる。
「getStaticProps」はサーバー側で実行される。
SSRの場合は、「getServerSideProps」を用いる。
Next.jsでもCSRが使用できる。
使用するときは、SEOが関連しない非公開ページを作成するときなど。
以下の記事にレンダリングについて詳しく解説されていた
Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する
Dynamic Routes
動的ルートはページのコンテンツへのルート(ファイルパス)が外部データに依存する場合に使用する。
動的なURLを作成することができる。
動的なページは[]で囲む。
「getStaticPaths」でパスを作れる
fallback
存在しないurlをたたいたときどういう動きをするか設定する
Catch-all Routes
動的ルートの階層構造を深くすることができる