Next.jsのpre-renderingメモ

Pre-rendering

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.

JavaScript	React app	Nextjs app
enable	✔️	✔️
disable	❎	✔️️

Two Forms of Pre-rendering

• Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.

• Server-side Rendering is the pre-rendering method that generates the HTML on each request.

• Pre-renderingには2つの種類がある
  • Static Generation
    • 実装：getStaticProps, getStaticPaths
  • Server side Rendering
    • 実装：getServerSideProps
• page毎に選択できるらしい
• Static Generationが基本的には推奨される。
  • ビルド時に静的なHTMLを生成してCDNに保持される。
• 頻繁に更新されるデータを表示するページで、リクエストのたびにページの内容が更新される場合。この場合はServer-side Renderingを使う。または従来のClient-side Renderingとなる。

Static Generation with Data

• ビルド時に外部データ(ファイルシステム、API、DB...)を取得して静的なHTMLを生成することもできる