サーバー側でデータ取得・HTMLレンダリングを行うことで、CSRの欠点を補ったもの

• サーバー側で一度HTMLをレンダリングして返すことで、初期表示の遅さを克服
• クライアント側でJavaScriptをもう一度実行する(Hydration)ことでCSRと同じ状態にする

1. ユーザーはサーバーへリクエストを送り、サーバーは対応したページをレスポンスとして返却
   • 必要なデータがあれば、サーバーでAPIを叩きデータを取得した上でHTMLに埋め込む
2. クライアント側でJavaScriptをもう一度走らせることで動的な動作が行える状態にする

• Next.jsではgetServerSidePropsを使うことでサーバーサイドで実行される
  Copy

  export default function Page({ data }) {
    // Render data...
  }
   
  // This gets called on every request
  export async function getServerSideProps() {
    // Fetch data from external API
    const res = await fetch(`https://.../data`)
    const data = await res.json()
   
    // Pass data to the page via props
    return { props: { data } }
  }

• svelte: デフォルトでON

• 初期レンダリングがCSR(SPA)より早い
• レンダリング結果を返すのでSEOに強い
• データ取得時はAPIを裏で叩くことによるパフォーマンス向上
  • クライアントから叩くときよりデータの取得が早くできたり、クライアントのリクエスト数が減る
• APIのエンドポイントを秘密にしたりできるので、セキュリティ向上

• サーバ側でのHTML生成が必要なため、SSR用のサーバーが必要になる
• 表示完了から操作可能になるまでにタイムラグがある
  • 表示は返ってきたHTMLをそのまま表示するだけ
  • JavaScriptが必要な処理はHydrationの完了を待つ必要がある

• React向け
  • Next.js
  • React Router
• Astro
• Vue.js向け: Nuxt
• Svelte向け: SvelteKit