😎

【ログイン機能】SPA・SSR・SSGの違い

1 min read

Nuxt.jsのSPA, SSR, SSGの違いについて

メモ

前提知識(ビルド・APIからのデータフェッチ・レンダリング)

ビルド

コンパイル(翻訳)+ ファイルをまとめるをまとめてビルドという

APIからデータフェッチ

ほかのサーバーからデータをとってくること

レンダリング

HTMLが画面に表示

本題

SPA, SSR, SSGは、上述3つがどこで、どのタイミングで行われるかが違うだけ

SPA(Single Page Application)

CSR(Client Side Rendering)とも言われる

SPAではもともとビルド済みのアプリをサーバーにあげているので、あとはクライアントの方でレンダリング、APIからデータフェッチが行われる

ビルド(済)→ レンダリング → APIからデータフェッチ

メリット

  • ずっとクライアントサイドで動作し、サーバーが関与しないので、動作が高速
  • 簡単にデプロイ(インターネットに公開)できる

デメリット

  • クライアントサイドでレンダリングされるまでDOMがなく、SEOの観点からすると不利(GoogleのSEO基準は不明のため仮説)
  • ブラウザでレンダリングされるので、初期表示が遅い

SSR(Server Side Rendering)

サーバーサイドレンダリングの名前の通り、リクエストが来たときにサーバー側でレンダリングが行われる

ビルドはSPAと同じように、開発者が元々ビルドしたアプリをサーバーにあげる

APIのデータフェッチはサーバー側で“1回だけ”行われる。あとはSPAと同じようにクライアントサイドで行われる

メリット

  • サーバーでレンダリングが行われるので、初期表示が早い

デメリット

  • サーバー上でJavaScript実行環境(Node.js)が必要
  • サーバーの負荷が多い

SSG(Static Site Generator)

SSRと同じようにサーバー側でビルド、レンダリング、”1回だけ”APIからデータフェッチ

SSRと違うところ

  • リクエストが来る前にすでにサーバー側でレンダリングがされている
  • クライアントサイドで一切APIからデータフェッチが行われない

(”1回だけ”APIからデータフェッチ)なので、クライアントサイドでもう一度APIからデータをとってくる、となると再びサーバーでビルドから始まる

メリット

  • 初期表示が3つの中で一番早い

デメリット

  • 更新頻度が多いサイトには向かない

SPA, SSR, SSGの使い分け

用途によって使い分け

まとめ

参考

https://takabeeblog.com/understand-spa-ssr-ssg/#outline_1__2

所感

Nuxt/laravelでアプリ開発しているので今回調査メモを取りました。
いったんはトレンドのSPAで作って見て、表示速度とか、リリース後SPAとかに注力してった場合に、SSRとかも検討していけばいいのかなと感じた。

Discussion

ログインするとコメントできます