🚀 ニフティ’s Notion

【Webアプリ2025 #18】SSR(Server Side Rendering)

SSR(Server Side Rendering)

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

  • サーバー側で一度HTMLをレンダリングして返すことで、初期表示の遅さを克服
  • クライアント側で JavaScript をもう一度実行する( Hydration )ことでCSRと同じ状態にする
📖ページ表示方法
  1. ユーザーはサーバーへリクエストを送り、サーバーは対応したページをレスポンスとして返却
    • 必要なデータがあれば、サーバーでAPIを叩きデータを取得した上でHTMLに埋め込む
  2. クライアント側で JavaScript をもう一度走らせることで動的な動作が行える状態にする
💭実装イメージ
  • Next.js では getServerSideProps を使うことでサーバーサイドで実行される
    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://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering
  • svelte : デフォルトでON
メリット
  • 初期レンダリングが CSR(SPA) より早い
  • レンダリング結果を返すので SEO に強い
  • データ取得時はAPIを裏で叩くことによるパフォーマンス向上
    • クライアントから叩くときよりデータの取得が早くできたり、クライアントのリクエスト数が減る
  • APIのエンドポイントを秘密にしたりできるので、セキュリティ向上
デメリット
  • サーバ側でのHTML生成が必要なため、 SSR 用のサーバーが必要になる
  • 表示完了から操作可能になるまでにタイムラグがある
    • 表示は返ってきたHTMLをそのまま表示するだけ
    • JavaScriptが必要な処理は Hydration の完了を待つ必要がある
有名なSSR対応フレームワーク
  • React向け
    • Next.js
    • React Router
  • Astro
  • Vue.js向け: Nuxt
  • Svelte向け: SvelteKit