Zenn
Closed3

SPA,SSR,SSG,ISRとか色々

おすしおすし

色々読んだけどこれが一番わかりやすかった
https://shimablogs.com/spa-ssr-ssg-difference

SPA

特徴

  • ブラウザでAPIを叩き、データを取得してDOMを構築して差分をレンダリング

メリット

  • ページごとにリクエストを送らないためページ遷移が高速
  • ビルド済のHTMLとJSファイルがホスティングサーバーにあれば動く

デメリット

  • 初期ローディングは時間がかかる
  • SEOでは不利な可能性もある

SSR

特徴

ブラウザ上で初期データをレンダリングするのではなく、サーバー側でAPIを叩き、レンダリングまで行ってからHTMLファイルを返却する

メリット

  • コンテンツ表示までの時間が早い(ブラウザ上で初期レンダリングを行わないから)
  • SEOに有利

デメリット

  • Node.jsサーバーを実行できる環境が必要(NextやNuxtなどのフレームワークを利用)
  • サーバー側の負荷が増加する

SSG

アプリのビルド時にAPIgからデータを取得して、HTMLファイルを生成する。
サーバーへのリクエストがあると、ビルド時に生成したHTMLファイルを返却する。リクエスト時でなくビルド時にAPIやデータベースからデータを取得し、レンダリングを行う。(ビルド時に事前にHTMLファイルレンダリングしておくことをプレレンダリング(事前描画)という。

メリット

  • 静的サイトを配信するので、パフォーマンスが向上
  • SPAと比較してSEOが向上する
  • HTMLとJSファイルのみがホスティングサーバーにあれば、ページ配信が可能

デメリット

  • ページ量が多いWebサイトには向かない

  • ページ量が多くなればなるほどビルド時間が遅くなる

  • 更新頻度の高いサイトには不向き(データの更新ごとにビルドを行う)

このスクラップは2024/06/02にクローズされました