一般社団法人 全国個人事業主支援協会

COLUMN コラム

WEB開発をしていれば耳にするSPA, SSR, SSGという単語。
私もなんとなくは理解しているのですが、突っ込んで聞かれたら答えられないと思い今回記事にします。

SPA

SPAとはSingle Page Applicationの略です。
ざっくりですが、SPAは<div id="app"></div>

こんなほぼ空と言って良いほどのHTMLタグだけでできているファイルが本体です。
これだけだと何も表示されないのでJavaScriptでAPIからのレスポンスを受信してDOMでこのタグを更新してHTML要素を作っていくのが基本です。

最初にサーバーに問い合わせた時に単一(シングル)のページを受け取るのでSingle Page Applicationです。

特徴は、

  • ぬるぬる動く今っぽいカッコいいページを作りやすい
  • ページ遷移の時の問い合わせ待ち時間が超短い
  • HTMLとJSファイルをホスティングサーバーに置けば良いので簡単で手軽
  • 最初表示する時に時間がかかる
  • 場合によってSEOが弱くなる可能性あり(最小限の空のようなHTML要素しかない場合あり)

SSR

SSRはServer Side Renderingの略です。英語読めばそのままで、サーバーでレンダリング(HTMLなど生成)します。
SPAはクライアント(ユーザーのブラウザ)からAPIを叩いてページを表示するのに必要なデータを取得してDOMでHTML要素を生成していましたが、こちらはサーバーでAPIを叩いてHTMLを作ってユーザーのブラウザに届けます。(2回目以降はSPAと同じように処理する場合あり)

 

特徴は

  • 最初にページを表示するまでが早い
  • HTMLがちゃんと生成されているのでSEOが強い
  • Node.jsサーバーでレンダリング処理をするサーバーを用意する必要あり
  • SPAよりサーバーの処理がかなり大きい

 

SSG

SSGはStatic Site Generatorの略です。静的サイトを生成するということです。アプリのビルドした時にHTMLファイルを生成。ページを表示するときはこのビルドした時にすでに生成した静的なファイルを返却するだけ。というわけです。

つまり高速にSEOも良くサーバーの負荷も軽いけども、毎回同じページであるということです。

 

特徴

  • 高速表示
  • SEO強い
  • サーバー負荷軽くSPAと同じくホスティングサーバーだけで良い
  • ページ量が多いと不利
  • ビルドに時間がかかる
  • 更新頻度多いWEBページには向かない

ということでブログや変更する必要の少ないLPなどでしようすることになると思います。

 

私はフロントエンドが専門ではないので曖昧にしていのですが、今回調べてみて知識が広がりました。
ということで今回は以上になります。

The following two tabs change content below.

石橋 航

最新記事 by 石橋 航 (全て見る)

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア