SSR(Server Side Rendering)
サーバー側でデータ取得・HTMLレンダリングを行うことで、CSRの欠点を補ったもの
- サーバー側で一度HTMLをレンダリングして返すことで、初期表示の遅さを克服
-
クライアント側で
JavaScript
をもう一度実行する(Hydration
)ことでCSRと同じ状態にする

microCMS
がデータソースの場合
📖ページ表示方法
-
ユーザーはサーバーへリクエストを送り、サーバーは対応したページをレスポンスとして返却
- 必要なデータがあれば、サーバーでAPIを叩きデータを取得した上でHTMLに埋め込む
-
クライアント側で
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