/mrsekut-p/Next.jsの4種類のbuild方式

generated at 2/16/2025, 7:54:13 AM
Next.jsの4種類のbuild方式
build後に表示される出力で各ページがどれで実装されているか見れる
resultλ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
この表示を見るだけじゃ、ISRとSSGの区別が見れないパターンが存在する(後述)


 Server 
SSR
getInitialPropsかgetServerSidePropsを使っている場合
アクセス時にserver sideでrenderingした結果を返す
アクセスごとに処理が走る
user認証後のページ等に使う
それ以外はできれば他のモノを使いたい


 Static 
Build時に静的ファイルを生成する
 SSG の簡易版みたいなやつ
 SSG の特にSever sideで実行する処理がないもの
getStatciProps内で特に何もfetchせず、完全な静的ページとして生成するもの
自動的に、特にDynamic Routesもしてないものに限る

 SSG 
SSGをする
Build時に静的ファイルを生成する
getStaticPropsを使っている場合
Dynamic Routesしててもできる


ISR
ISRをする
Build時に静的ファイルを生成する
getStaticPropsに revalidate を指定している場合
ISRが指定されているものはbuild後の表示は以下のようになっている
result├ ● /posts (ISR: 1 Seconds)               ...
SSGと同じ「●」が付いていて、revalidateの秒数が記述されている
何故か知らんけどgetStaticPathsを使っているpageでは、ISRになっているのにbuild後の表示に (ISR: ..) の表示がされない
「●」の表示だけが書いているので、パット見ただの SSG に見える