SPAとSSRの違いとは

最近Nuxt.jsを使用したWebサービスの開発を進めているのですが、Nuxt.jsを使用するにあたって、SPAがいいの？SSRがいいの？てかそもそもどんな違いがあるの？ってな感じで気になったので、調べてみました。

SPA（Single Page Application）の特徴

メリット

・サーバーの準備が楽

・初期表示以降のページ遷移が快適

デメリット

・初期表示が遅い

SPAは実装や、サーバーへのデプロイに特殊な工程が不要であるため、扱いやすいと思います。フロントでルーティングを行うためページ遷移は快適ですが、初期表示時に全てをレンダリングするため、初期表示は遅くなってしまいます。

SSR（Server Side Rendering）の特徴

メリット

・初期表示が遅くなることはない

デメリット

・サーバーの準備が複雑

SPAでデメリットになっていた初期表示時のリクエストをサーバーサイドでレンダリングするため、SPAのデメリットを打ち消すことができます。

しかし、レンダリングするサーバーを考慮した実装が必要になり、手間がかかります。

SSG（Static Site Generation）の特徴

メリット

・初期表示が遅くなることはない

・SSRより高速

・サーバーの準備が楽

デメリット

・動的なサイトにはあまり適さない

SSGはHTMLを事前に生成するため、レスポンスは速いですが、サイトによって向き不向きがあります。ブログなどのHTMLを事前に生成しても問題がないWebサイトには適していますが、ログインが必要なWebサービスなどではあらかじめHTMLを生成しても各ユーザーによって書き換える処理等が必要になるため、向いていないと言えます。