7839

雑草魂エンジニアブログ

Client Side Rendering（SPA）・SSR・SSG を整理してみた

技術 JavaScript Next.js Nuxt.js

Next.js で開発しているときに、Client Side Rendering（SPA）・SSR・SSG についてきちんと整理できておらず、自分なりの整理をしてみたので、備忘録として残しておく。（React ベースのフレームワークで SSG といえば、Next.js 。ただし、v9.3から SSG の機能が本格的に導入されたので、Next.js は SSR はもちろんのこと、SSG も対応可能となった。） SSR を理解する上で、Client Side Rendering または SPA と対比しながら整理を行った。

Client Side Rendering

Client Side Rendering は、SPA（= Single Page Application）とほぼ同意義である。

ブラウザからリクエストされると、サーバーは、JS のビルドされたファイルと必要最小限のHTML要素しか含まれないHTMLファイルを返却する。HTMLファイルの中身はほぼないので、初期表示は何も表示されない。それから、ブラウザ上でAPIなどを使い、初期データを取得して、HTML 要素をレンダリングする。

<html>
  <head>
    <title>sample</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

f:id:serip39:20200823202016j:plain

  • メリット
    • ユーザーに優れた UX 提供が可能
    • （ページ遷移ごとにリクエストしないため、）ページ遷移が高速
    • ネイティブアプリの代わりとして提供可能
    • HTMLとJSファイルのみがホスティングサーバーにあれば、ページ配信が可能
  • デメリット
    • 初期ローディングにかかる時間が増える
    • SEOで不利な場合がある（クローラーがJSを実行して中身を解析できるようにはなっているようではある。）
    • 動的なOGP対応ができない場合がある

SSR

「Server Side Rendering」の略である。上記の Client Side Rendering と対比して、ブラウザ上で初期データをレンダリングするのではなく、サーバー側でデータ取得、レンダリングまでを行い、HTMLファイルを配信する。ただし、初期データ以外のデータはAPIなどを用いて取得を行い、SPA同様に、ブラウザ上でレンダリングを行う。

f:id:serip39:20200823202030j:plain

  • メリット
    • （ブラウザ上でレンダリングしないので）コンテンツ表示までの時間を短縮できる
    • （SPAと比較して）SEOが向上する
    • （SPAと比較して）動的なOGP対応が可能
  • デメリット
    • SSRするためのWebサーバーが必要になる

SSG

「Static Site Generator」の略であり、静的サイトジェネレーターである。

アプリケーションのビルド時に、APIなどからデータを取得し、HTMLを最初に生成しておく。サーバーへのリクエストがあった場合には、この生成されたHTMLファイルを返却する。このように、ブラウザではなく、サーバーで先にビルド時にデータを取得してレンダリングを行っておくことを「プリレンダリング」という。また、生成された各 HTML はそのページに必要な最小限の JavaScript コードと関連づけられる。ブラウザによってページが読み込まれると、そのページの JavaScript コードが実行される。（このプロセスは ハイドレーション と呼ばれる。）

一番の特徴は、アプリケーションをビルドした際に、データベースなどからデータを取得することである。ブラウザからのリクエストがあった場合ではない部分が大きな違いである。そのため、利用されるアプリケーションとしては、更新頻度の少ないサイトやブログなどが挙げられる。

f:id:serip39:20200823222603j:plain

  • メリット
    • 静的サイトを配信するので、レスポンスが高速
    • （SPAと比較して）SEOが向上する
    • （SPAと比較して）動的なOGP対応が可能
    • HTMLとJSファイルのみがホスティングサーバーにあれば、ページ配信が可能
  • デメリット
    • ページ量が多いWebサイトには向かない
    • ページ数が多くなればなるほど、ビルド時間が遅くなる
    • 頻繁にデータ更新があるサイトには向かない（データ更新の度に、再ビルドが必要。）
    • APIを頻繁にリクエストするサイトには向かない

まとめ

各種構成の違いに関して、整理をしてみた。実際に、Next.jsで開発を行う際には、構成の違いに応じて、実装の仕方が異なる。特に、getInitialProps・getStaticProps・getStaticPaths・getServerSideProps をいつ、どのように使うべきか把握しておく必要がある。この違いに関しては、また別の記事で整理したいと思う。

それでは、ステキな開発ライフを。