3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SPA/SSR/SSGのメモ

Posted at

SPA(Single Page Application)

スクリーンショット 2021-03-08 9.17.40.png

初期表示はページをサーバーにリクエストします。この時渡されたJSファイル等をクライアント側で読み込んで表示させます。

2回目以降に更新がかかったら必要な差分をデータで持ってきて表示させます。
このことにより、画面遷移せずに1つのページ上で異なる表現が可能になり、ページまるごとサーバーに要求することなく必要な部分だけを貰えるので、通信量を抑えることが出来ます。
ですが初期表示の際はJSコードが多くなってしまうので、遅くなってしまうというデメリットがあります。

SSR(Server Side Rendering)

スクリーンショット 2021-03-08 9.17.50.png

SPAとは違い、クライアントではなくサーバー側でファイルを完成させてから持ってきます。
これによりクライアント上でのレンダリング時間がないため、ブラウザ上で速く表示できたり、通信環境に左右されにくいメリットがあります。
その反面、サーバー側でページを生成するので負荷がかかってしまいます。

SSG(Static Site Generator)

スクリーンショット 2021-03-08 9.18.01.png

ビルド時に事前に表示する際必要なデータを取得しておき、静的なHTMLを生成します。(プリレンダリング)
返却時にはこの生成した静的ファイルを返します。

ページを完成したまま持っているので、ページ表示までの時間はSSRよりも速いです。
ですがページ量が多かったらビルド時間がかかってしまったり、更新の頻度が高いサイトだと毎回ビルドしなければ反映されないので不便です。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?