Zenn
Closed1

【Next.js】CSR(SPA)・SSR・SSG・ISR比較表

JavaScript
Next.js
hirohiro

何について書く？

  • Next.jsフレームワークおける４種類のレンダリング方法の比較

内容

  • 用語
    • CSR:クライアントサイドレンダリング（SPA:シングルページアプリケーション）
    • SSR:サーバーサイドレンダリング
    • SSG:静的サイトシェネレーター
    • ISR:インクリメント静的再生成
CSR(SPA) SSR SSG ISR
レンダリング場所 クライアント側 サーバー側 サーバー側 サーバー側
レンダリングタイミング リクエスト時 リクエスト時 リクエスト以前に予め行いCDNにキャッシュ 一定期間ごとに
情報の新しさ 最新 最新 △常に最新ではない ○常に最新ではない
書き方特徴（関数） 通常は使えない⇒参考サイト https://blog.hey3.dev/posts/nextjs-spa ①Next.js標準（データなしの静的生成）では通常の関数②データあり静的生成⇒事前に取得したデータを基にパス動的パス作成では、async関数+getServerSideProps async関数+getStaticPropsまたはgetStaticPaths async関数+getStaticProps+return内revalidateで更新頻度設定

参考サイト

このスクラップは2022/04/17にクローズされました