【React&TypeScript入門】簡単にSSRとSSGの違い使い分けの話

PR
【React&TypeScript入門】簡単にSSRとSSGの違い使い分けの話
この記事は約3分で読めます。
読んでほしい人

下記のような人に読んでいただきたい!
なるべくわかりやすくまとめます!

  • SSRとSSGってなんとなく分かっているけど〜
  • 聞かれたらなんとなく答えるけど〜
  • 実際何がどう違って、何ができるのかわからない〜
  • 調べてもよくわからない〜
PR

PR
PR

PR
PR

SSRとSSGの違い

要約するとこれです!

SSRとは?

動的な表示である

  • 特徴
    • リクエストのたびにサーバーでページを動的に作って表示する方法

SSGとは?

静的な表示である

  • 特徴
    • 事前にビルドしたファイルを静的なHTMLファイルとして配信する方法

簡潔に理解した上それぞれを見ていきます!

SSR(Server-Side Rendering)

最大のメリット

リクエストごとにサーバーサイドでデータを取得してレンダリングするため、動的なコンテンツをリアルタイムに表示するのに適しています。
ユーザーの要求に応じて最新のデータを取得して表示できる。

最大の使い所

個別のユーザー情報やセッション情報等の動的な情報を含むコンテンツを提供できる。
ユーザー情報を使って動的なページを表示する際などに使い勝手が良かったです。

面倒なところ

SSRを実装するには、サーバーサイドの設定や管理が必要
サーバーの負荷対策やキャッシュの管理、スケーリングの調整など、インフラストラクチャの面倒な側面があります。

合わない使い方

コンテンツがほとんど静的である場合には効率的ではありません。
このような場合には、SSGの方が適しています。

SSG(Static Site Generation)

最大のメリット

ビルド時に静的なHTMLファイルを生成するため、クライアントのリクエストに対して即座にレスポンスを返せます。
事前に生成された静的なコンテンツを提供することで、サーバーに負荷を掛けずに済む

最大の使い所

静的なコンテンツやブログ記事の表示に適しています。
コンテンツが頻繁に変更されず、再ビルドの頻度が低い場合に効果やコスパが良い。
ビルドして生成されたファイルを普通のHTMLのようにアップロードするだけで表示できる。

面倒なところ

コンテンツの情報が更新されるたびに再ビルドする必要があります。※そもそも処理やコンポーネントを修正した場合はどちらも更新は必要
大規模なサイトや頻繁な更新がある場合は、ビルド時間が長くなる可能性があります。

合わない使い方

表示データの更新が頻繁に行われる場合や動的なURL等には適していません。
このような場合にはSSRの方が適しています。

さいごに

需要の高い人気プログラミング言語&フレームワーク【将来性】
数多くの種類の言語からプログラミング初心者にもエンジニアのキャリアアップにも最適な将来性の高い人気のプログラミング言語とおすすめフレームワークを紹介!特に需要の把握はスキルアップと年収に直結です。ガチで必要な全ての選択肢の答えがここに
【React&TypeScript入門】.jsや.tsの使い方とフォルダ名の話
【React&TypeScript入門】クセが強く個性豊かな多くの開発現場を経験した筆者がこれだけは、覚えて損はないと思った、主要な.js/.tsファイルの使い方とフォルダ名を付ける時に気をつけるべきポイントを解説。これだけで格段に変わる話
【React&TypeScript入門】理解が進むreactとtypescriptの違いの話
JavaScript(js)ライブラリのreactとtypescript(ts)の違いについて簡単に解説します。概念の違いをしっかりと抑えておくとその後の学習や開発の際に理解が進むので身につく速度が変わります。基礎的な概念なので必ず覚えておきましょう
Google Bard vs ChatGPTの違いは?おすすの使い方徹底比較
ついにGoogleから対話型AIサービスが「Bard」登場!ChatGPTとの違いをわかりやすく使用感で徹底比較【初心者向け】
【make】初心者から始めるおすすめノーコードツールの開発紹介
ノーコードで簡単に自動化やChatGPTを使ったアプリ開発できるツールが登場しました!初心者向けにおすすめのmakeでアプリ開発、使い方を紹介!簡単にLINE連携もできちゃいます。Makeはバックエンド、Bubbleはフロントエンド
Nest.jsを使ったリクエストパラメータの取得方法【超入門】
BackendにもTypeScriptを使ってみよう!初心者〜中級者向けにNest.jsを使ったリクエストパラメータの取得方法について解説【超入門】
PR
PR

コメント

タイトルとURLをコピーしました