下記のような人に読んでいただきたい！
なるべくわかりやすくまとめます！
（いつもエンジニア系の記事ムズい、中学生でもわかるように要約してくれと思っている）
- SSRとSSGってなんとなく分かっているけど〜
- 聞かれたらなんとなく答えるけど〜
- 実際何がどう違って、何ができるのかわからない〜
- でも調べるの面倒〜
- 調べてもよくわからない〜
SSRとSSGの違い
要は！これです
- SSR（動的な表示）
- リクエストのたびにサーバーでページを動的に作って表示する方法
- SSG（静的な表示）
- 事前にビルドしたファイルを静的なHTMLファイルとして配信する方法
簡潔に理解した上それぞれを見ていきます！
SSR（Server-Side Rendering）
最大のメリット
リクエストごとにサーバーサイドでデータを取得してレンダリングするため、動的なコンテンツをリアルタイムに表示するのに適しています。
ユーザーの要求に応じて最新のデータを取得して表示できる。
最大の使い所
個別のユーザー情報やセッション情報等の動的な情報を含むコンテンツを提供できる。
ユーザー情報を使って動的なページを表示する際などに使い勝手が良かったです。
面倒なところ
SSRを実装するには、サーバーサイドの設定や管理が必要。
サーバーの負荷対策やキャッシュの管理、スケーリングの調整など、インフラストラクチャの面倒な側面があります。
合わない使い方
コンテンツがほとんど静的である場合には効率的ではありません。
このような場合には、SSGの方が適しています。
SSG（Static Site Generation）
最大のメリット
ビルド時に静的なHTMLファイルを生成するため、クライアントのリクエストに対して即座にレスポンスを返せます。
事前に生成された静的なコンテンツを提供することで、サーバーに負荷を掛けずに済む。
最大の使い所
静的なコンテンツやブログ記事の表示に適しています。
コンテンツが頻繁に変更されず、再ビルドの頻度が低い場合に効果やコスパが良い。
ビルドして生成されたファイルを普通のHTMLのようにアップロードするだけで表示できる。
面倒なところ
コンテンツの情報が更新されるたびに再ビルドする必要があります。※そもそも処理やコンポーネントを修正した場合はどちらも更新は必要
大規模なサイトや頻繁な更新がある場合は、ビルド時間が長くなる可能性があります。
合わない使い方
表示データの更新が頻繁に行われる場合や動的なURL等には適していません。
このような場合にはSSRの方が適しています。
さいごに
コメント