😎
【ログイン機能】SPA・SSR・SSGの違い
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と同じようにサーバー側でビルド、レンダリング、”１回だけ”APIからデータフェッチ
SSRと違うところ
- リクエストが来る前にすでにサーバー側でレンダリングがされている
- クライアントサイドで一切APIからデータフェッチが行われない
（”１回だけ”APIからデータフェッチ）なので、クライアントサイドでもう一度APIからデータをとってくる、となると再びサーバーでビルドから始まる
メリット
- 初期表示が3つの中で一番早い
デメリット
- 更新頻度が多いサイトには向かない
SPA, SSR, SSGの使い分け
用途によって使い分け
まとめ
参考
所感
Nuxt/laravelでアプリ開発しているので今回調査メモを取りました。
いったんはトレンドのSPAで作って見て、表示速度とか、リリース後SPAとかに注力してった場合に、SSRとかも検討していけばいいのかなと感じた。
Discussion