こんにちは。takabeeです。
今回はNuxt.jsのSPA, SSR, SSGの違いについて、世界一わかりやすく解説していく記事です。
Nuxt.jsを勉強し始めたばかりの方は、
初心者という悩みを持ちがちです。
その気持ち、、、
非常によく分かります！
だっていきなりレンダリングとかビルドとかAPIとか意味わからない用語がたくさん出てくるんだもの。。。
なので、僕と同じ悩みをもった方に分かりやすく、誰にでも5分で理解させる記事を作りました。
ではご覧ください。
そもそもNuxt.jsとは？
もしかしたらまだNuxt.jsがどんなものかあんまりわかってないよー、て方もいるかもしれません。
その方はこの記事を5分くらい眺めてから、またこちらの記事に戻ってきてください。
たぶん理解度が4割くらい上がります。
Nuxt.jsのSPA, SSR, SSGの違い
これからSPA, SSR, SSGの解説をしていきますが、事前に覚えてもらう用語が3つあります。
・APIからのデータフェッチ
・レンダリング
です。
この3つが分かれば、SPA, SSR, SSGが理解できたも同然です。
なのでまずここから解説しますね。
Takabee
前提知識（ビルド・APIからのデータフェッチ・レンダリング）
簡単にいうと、
APIからデータフェッチ：ほかのサーバーからデータをとってくること
レンダリング：実際にHTMLが画面に表示されること
です。
それぞれ詳しく説明します。
まずは「ビルド」から。
前提として、僕たちがファイルに書いたコード（ソースコード）は、コンピュータは解読できません。
それを解読できるようにするのが、コンパイル（翻訳）という操作です。
コンピュータさんが解読できるファイルにするまでに、コンパイルだけではなく他にもいろいろなことをしています。
これを全部ひっくるめて「ビルド」と呼んでいます。
ソースコードをコンピュータが分かるように翻訳する一連の流れが「ビルド」
実際には翻訳した後、コンピュータが実行するまでがビルドですが、まあそこらへんはざっくりとした理解で問題ないです。
次に「APIからのデータフェッチ」です。
APIというのはほかの人が公開している機能で、自分にも使えるようにしてくれたものです。
たとえば楽天やAmazonは自分たちの商品データ（商品の名前や価格、画像など）を僕たちにも簡単に使えるようにしてくれています。
だからなんかアプリを作っているとき、Amazonのデータを使いたいと思ったら、申し込んで申請が通ればすぐ使えます。
そのデータをとってくることを「APIからのデータフェッチ」といいます。
決まった言葉ではないですが、SPA, SSR, SSGを調べるとよく使われていたので、いったんここでも「APIからデータフェッチ」を使います。
APIから便利な機能をとってくるのが「APIからのデータフェッチ」
最後に「レンダリング」です。
ここで実際にHTMLが表示されます。
厳密にいうとDOMが関わってきますが、ここではHTMLが表示されるという軽い認識で大丈夫です。
ここまでで「ビルド」「APIからデータフェッチ」「レンダリング」の説明が終わりました。
もう一度確認しておきましょう。
APIからデータフェッチ：ほかのサーバーからデータをとってくること
レンダリング：実際にHTMLが画面に表示されること
何度も言いますが、ここが理解できたらSPA, SSR, SSGは理解できたも同然です。
なぜならSPA, SSR, SSGは、この3つがどこで、どのタイミングで行われるかが違うだけだから。
なのであとは気楽に行きましょう！
Takabee
SPA（Single Page Application）
CSR（Client Side Rendering）とも言われます。
SPAではもともとビルド済みのアプリをサーバーにあげているので、あとはクライアントの方でレンダリング、APIからデータフェッチが行われます。
はじめにレンダリングでHTMLが表示され、APIのデータが必要になるたびにAPIからデータフェッチが行われる、といった感じです。
SPAではレンダリングからAPIからのデータフェッチまですべてクライアントでやるよ！
またクライアントサイドでレンダリングされるまでDOMがなく、SEOの観点からすると不利だといわれています。
でもそもそもGoogleのSEO基準がどういう風になっているかなんてわからないので、結論は分かりません。（笑）
・ずっとクライアントサイドで動作し、サーバーが関与しないので、動作が高速。
・簡単にデプロイ（インターネットに公開）できる。
・ブラウザでレンダリングされるので、初期表示が遅い。
● ここまでのまとめ
SPA, SSR, SSGの比較表
SSR（Server Side Rendering）
サーバーサイドレンダリングの名前の通り、リクエストが来たときにサーバー側でレンダリングが行われます。
ビルドはSPAと同じように、開発者が元々ビルドしたアプリをサーバーにあげるので行われません。
ここでAPIのデータフェッチはサーバー側で“1回だけ”行われます。あとはSPAと同じようにクライアントサイドで行われます。
SSRではリクエストがきてから1度だけAPIからデータフェッチを行う。そのあとレンダリングされ、レスポンスを返す。そのあとはSPAと同じだよ。
・サーバーでレンダリングが行われるので、初期表示が早い。
・サーバー上でJavaScript実行環境（Node.js）が必要。
・サーバーの負荷が多い。
● ここまでのまとめ
SPA, SSR, SSGの比較表
SSG（Static Site Generator）
SSGだけなんかほかの2つと略語の毛並みが違う？と思いますが、気にしないでおきましょう。
SSGではSSRと同じようにサーバー側でビルド、レンダリング、”１回だけ”APIからデータフェッチが行われます。
ただSSRと違うところは、リクエストが来る前にすでにサーバー側でレンダリングがされることと、クライアントサイドで一切APIからデータフェッチが行われないということ。
なので、クライアントサイドでもう一度APIからデータをとってくる、となると再びサーバーでビルドから始まります。
SSGのSSRと違うところは、リクエストがくる前にサーバーでレンダリングまで済ませてしまっていること。あとクライアントでAPIからのデータフェッチをしないこと。
・初期表示が3つの中で一番早い。
・更新頻度が多いサイトには向かない。
● ここまでのまとめ
SPA, SSR, SSGの比較表
Takabee
SPA, SSR, SSGの使い分け
いままでSPA, SSR, SSGについて理解してきました。
またそれらのメリットデメリットも理解できました。
初心者
という疑問を持つのは当然ですね。
結論から言うと、用途によって使い分けてください。
使い分けの目安は次の図を参考にするといいですよ。
（ https://qiita.com/nishinoshake/items/f42e2f03663b00b5886d より出典）
まとめ
ここまで、お疲れさまでした。
今までのまとめはこの図で確認できます。
SPA, SSR, SSGの比較表
SPA, SSR, SSGを調べていると、さっぱり分からなくてへこむかもしれません。
ただ間違いなくジワジワと実力はついているので、地道に成長していきましょう。
マンガみたいに一気に成長！みたいな現象はめったにありません。
それでも自分は成長のスピードが遅いのではないか？と感じるなら、一度この記事を読んでみてください。
僕自身ずっと失敗してきたので、その経験から書いた、勉強法に関する記事です。
間違いなく実力はついていきます。
あせらず、じっくりと勉強してください。
では、また次の記事でお会いしましょう。
コメント
コメント一覧 （1件）
[…] 関連記事 SPA・SSR・SSGを5分で理解できるように解説してみた。【これで解決】 […]