自分で作っていてやっと理解したのでまとめます。。。。
SPA
ブラウザからリクエストされると、サーバーは、JS のビルドされたファイルと必要最小限のHTML要素しか含まれないHTMLファイルを返却する。HTMLファイルの中身はほぼないので、初期表示は何も表示されない。それから、ブラウザ上でAPIなどを使い、初期データを取得して、HTML 要素をレンダリングする。
SSR
「Server Side Rendering」の略である。上記の Client Side Rendering と対比して、ブラウザ上で初期データをレンダリングするのではなく、サーバー側でデータ取得、レンダリングまでを行い、HTMLファイルを配信する。ただし、初期データ以外のデータはAPIなどを用いて取得を行い、SPA同様に、ブラウザ上でレンダリングを行う。
SSG
「Static Site Generator」の略であり、静的サイトジェネレーターである。
アプリケーションのビルド時に、APIなどからデータを取得し、HTMLを最初に生成しておく。サーバーへのリクエストがあった場合には、この生成されたHTMLファイルを返却する。このように、ブラウザではなく、サーバーで先にビルド時にデータを取得してレンダリングを行っておくことを「プリレンダリング」という。また、生成された各 HTML はそのページに必要な最小限の JavaScript コードと関連づけられる。ブラウザによってページが読み込まれると、そのページの JavaScript コードが実行される。(このプロセスは ハイドレーション と呼ばれる。)
一番の特徴は、アプリケーションをビルドした際に、データベースなどからデータを取得することである。ブラウザからのリクエストがあった場合ではない部分が大きな違いである。そのため、利用されるアプリケーションとしては、更新頻度の少ないサイトやブログなどが挙げられる。