このサイトのテーマ『SWELL』を見てみる >>

SPA・SSR・SSGを5分で理解できるように解説してみた。【これで解決】

こんにちは。takabeeです。

 

今回はNuxt.jsのSPA, SSR, SSGの違いについて、世界一わかりやすく解説していく記事です。

Nuxt.jsを勉強し始めたばかりの方は、

初心者
Nuxt.jsの勉強を始めてみたけど、SPAとSSR、SSGの違いが全く分からないな。もっと分かりやすく解説してくれる記事ないかな。。。

という悩みを持ちがちです。

その気持ち、、、

 

非常によく分かります!

 

 

だっていきなりレンダリングとかビルドとかAPIとか意味わからない用語がたくさん出てくるんだもの。。。

なので、僕と同じ悩みをもった方に分かりやすく、誰にでも5分で理解させる記事を作りました。

ではご覧ください。

ネコ大先生
この記事は【約7分】で読めるニャ。

 

目次

そもそもNuxt.jsとは?

もしかしたらまだNuxt.jsがどんなものかあんまりわかってないよー、て方もいるかもしれません。

その方はこの記事を5分くらい眺めてから、またこちらの記事に戻ってきてください。

たぶん理解度が4割くらい上がります。

あわせて読みたい
Nuxt.jsとは?超シンプルなTODOアプリを作りながらサクッと理解しよう!【メチャクチャ簡単です】 こんにちは。takabeeです。   今回はNuxt.jsをTODOアプリを作りながらサクッと理解してしまおう、という記事です。 この記事を見てくれている方は、 Nuxt初心者 Nu...
Takabee
あせらず、基礎からしっかり理解しよう!

 

Nuxt.jsのSPA, SSR, SSGの違い

これからSPA, SSR, SSGの解説をしていきますが、事前に覚えてもらう用語が3つあります。

・ビルド
・APIからのデータフェッチ
・レンダリング

です。

この3つが分かれば、SPA, SSR, SSGが理解できたも同然です。

 

なのでまずここから解説しますね。


Takabee
これだけ覚えれば完璧!!

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

簡単にいうと、

ビルド:書いたコードを実際にコンピューターさんに分かるようなコードにすること
APIからデータフェッチ:ほかのサーバーからデータをとってくること
レンダリング:実際にHTMLが画面に表示されること

です。

それぞれ詳しく説明します。

 

まずは「ビルド」から。

前提として、僕たちがファイルに書いたコード(ソースコード)は、コンピュータは解読できません。

それを解読できるようにするのが、コンパイル(翻訳)という操作です。

 

コンピュータさんが解読できるファイルにするまでに、コンパイルだけではなく他にもいろいろなことをしています。

これを全部ひっくるめて「ビルド」と呼んでいます。

ソースコードをコンピュータが分かるように翻訳する一連の流れが「ビルド」

 

実際には翻訳した後、コンピュータが実行するまでがビルドですが、まあそこらへんはざっくりとした理解で問題ないです。

Takabee
まとめると、ソースコードをコンピュータが読めるようにする一連の流れが「ビルド」ということです。

 

次に「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と同じようにサーバー側でビルド、レンダリング、”1回だけ”APIからデータフェッチが行われます。

 

ただSSRと違うところは、リクエストが来る前にすでにサーバー側でレンダリングがされることと、クライアントサイドで一切APIからデータフェッチが行われないということ。

なので、クライアントサイドでもう一度APIからデータをとってくる、となると再びサーバーでビルドから始まります。

SSGのSSRと違うところは、リクエストがくる前にサーバーでレンダリングまで済ませてしまっていること。あとクライアントでAPIからのデータフェッチをしないこと。

 

メリット

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

デメリット

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

● ここまでのまとめ

SPA, SSR, SSGの比較表

 


Takabee
以上がSPA, SSR, SSGの解説になります。

SPA, SSR, SSGの使い分け

いままでSPA, SSR, SSGについて理解してきました。

またそれらのメリットデメリットも理解できました。

 


初心者
この3つのうち、どれを使えばいいんだ?

という疑問を持つのは当然ですね。

 

結論から言うと、用途によって使い分けてください。

使い分けの目安は次の図を参考にするといいですよ。

( https://qiita.com/nishinoshake/items/f42e2f03663b00b5886d より出典)

Takabee
完璧な答えなんてないから、柔軟に使い分けよう!

まとめ

ここまで、お疲れさまでした。

今までのまとめはこの図で確認できます。

SPA, SSR, SSGの比較表

 

SPA, SSR, SSGを調べていると、さっぱり分からなくてへこむかもしれません。

 

ただ間違いなくジワジワと実力はついているので、地道に成長していきましょう。

マンガみたいに一気に成長!みたいな現象はめったにありません。

 

それでも自分は成長のスピードが遅いのではないか?と感じるなら、一度この記事を読んでみてください。

僕自身ずっと失敗してきたので、その経験から書いた、勉強法に関する記事です。

あわせて読みたい
失敗ばかりの僕がたどり着いた、最強のプログラミング勉強法【5000円以下】 こんにちは。takabee(@takabe19)です。 今回はプログラミングの勉強法について解説をしていきます。   プログラミングを始める人は大体こんな感じの方が多いです...
あわせて読みたい
Nuxt.jsの勉強法を4000円以下でまとめてみた。【1ヶ月でマスター】 こんにちは。takabeeです。 *本記事はNuxt.jsの勉強法について解説をしていく記事となっています。 この記事は「いますぐNuxt.jsを始めたい!でも方法が分からない!」...

間違いなく実力はついていきます。

あせらず、じっくりと勉強してください。

 

では、また次の記事でお会いしましょう。

ネコ大先生
最後まで読んでくれてありがとうニャ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Webエンジニア兼ブロガー。Nuxt.js, Wordpress, SEO対策などの案件を承っております。
お仕事の依頼はこちらから。
https://www.lancers.jp/profile/takabeee

コメント

コメント一覧 (1件)

コメントする

目次
閉じる