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

• サーバー側で一度HTMLをレンダリングして返すことで、初期表示の遅さを克服
• クライアント側でJavaScriptをもう一度実行する(Hydration)ことでCSRと同じ状態にする
  • Hydration について
    • https://zenn.dev/ak/articles/dd60f8b1712628
    • https://qiita.com/Yametaro/items/22cde58cd6abf577f1a4

      SSR(Server Side Rendering)

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 } }
  }

• https://learn.svelte.jp/tutorial/ssr: デフォルトでON

• 初期レンダリングがCSR(SPA)より早い
• レンダリング結果を返すのでSEOに強い
• データ取得時はAPIを裏で叩くことによるパフォーマンス向上
  • クライアントから叩くときよりデータの取得が早くできたり、クライアントのリクエスト数が減る
• APIのエンドポイントを秘密にしたりできるので、セキュリティ向上
• その他こまごま: https://nextjs.org/docs/app/building-your-application/rendering/server-components#benefits-of-server-rendering

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

• React向け
  • https://nextjs.org/
  • https://reactrouter.com/
• https://astro.build/
• Vue.js向け: https://nuxt.com/
• Svelte向け: SvelteKit