はじめに
Reactの復習を進める中で「サーバサイドレンダリング（SSR）」という言葉に触れたものの、その仕組みや動作の流れ、Web開発において重要なのはわかるけどどう重要かが自分の中で曖昧でした。そこで、SSRについて、その基本概念、プロセス、利点を自分なりにまとめようと思いました。また、CSR(クライアントサイドレンダリング)との違いや具体的な実装方法についても触れ、Reactをより効果的に活用するための理解に繋げていこうと思います。
1. SSRの基本概念
サーバサイドレンダリング（SSR）とは、サーバ側でページのHTMLを生成し、それをブラウザに送信する手法です。
従来の静的HTMLサイトはあらかじめ書かれたHTMLをそのまま表示するのに対し、SSRはデータベースなどの動的データを反映しながらサーバ側でHTMLを組み立てるため、動的なコンテンツも素早く表示可能です。
例えば、ブログページやECサイトの商品一覧など、動的なデータが含まれるページでよく使われます。
2. SSRのプロセス
SSRが動作するプロセスは以下の通りです：
-
ユーザーがページをリクエスト
- ブラウザからサーバにHTTPリクエストが送信されます。
-
サーバでHTMLを生成
- サーバ側でReactやVue.jsが動作し、動的データをもとにHTMLを生成します。
-
生成されたHTMLを送信
- 完成したHTMLがブラウザに送られます。
-
ブラウザがページを表示
- ブラウザがHTMLを描画し、最初のコンテンツが表示されます。
-
ハイドレーション（Hydration）
-事前にサーバ側で生成されたHTMLに対して、クライアント側のJavaScriptがイベントハンドラをアタッチしていく処理のことをハイドレーションと言います。これにより、ページがインタラクティブになり、ユーザーの操作に応答できるようになります。
3. SSRの利点
① 高速な初期表示
サーバがあらかじめHTMLを生成してブラウザに送るため、JavaScriptの読み込みを待たずにページが表示されます。特に低速なネットワーク環境やデバイスではこの効果が大きいです。
② SEO（検索エンジン最適化）の向上
検索エンジンはページのHTMLを読み取って内容を判断し、検索結果に反映します。SSRではサーバ側であらかじめ完成したHTMLを送るため、検索エンジンのクローラーがページの情報をすぐに読み取れるようになります。これにより、検索エンジンに正確な内容が伝わりやすくなり、SEOの効果が高まります。
③ アクセシビリティの向上
JavaScriptが無効なブラウザやデバイスでもページが表示されるため、より多くのユーザーにコンテンツを届けられます。
4. SSRとCSRの違い
クライアントサイドレンダリング（CSR）とは？
CSRはHTMLが最初は空で、JavaScriptがブラウザ上で実行されて動的にコンテンツを描画する手法です。
比較表：SSRとCSRの違い
| 項目 | SSR（サーバサイドレンダリング） | CSR（クライアントサイドレンダリング） |
|---|---|---|
| 初期表示速度 | 高速（HTMLがすぐ表示される） | 遅延することがある |
| SEO対策 | 強い（HTMLがすぐクローラーに読まれる） | 弱い（JavaScript依存） |
| JavaScript依存 | 少ない | 大きい |
| 実装の難易度 | 複雑（サーバ側処理が必要） | 比較的簡単 |
| 動的な操作の柔軟性 | クライアント側で補完が必要 | 高い（初期表示後に動的な操作が得意） |
5. SSRの実装方法：Next.jsを使ったSSR
SSRを実装する際に最も簡単で効果的な方法はNext.jsを使うことです。Next.jsはReactをベースにしたフレームワークで、SSRが簡単に導入できます。
1. Next.jsのインストール
npx create-next-app my-ssr-app
cd my-ssr-app
npm run dev
2. getServerSidePropsを使ったSSR
Next.jsではgetServerSidePropsを使うことで、サーバ側でデータを取得してHTMLを生成します。
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/posts');
const data = await res.json();
return { props: { posts: data } };
}
export default function Home({ posts }) {
return (
<div>
<h1>サーバサイドレンダリング</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
3. ハイドレーションの確認
npm run devでローカルサーバを起動し、http://localhost:3000にアクセスします。
- 最初にHTMLが表示される（SSR）
- JavaScriptが読み込まれ、ページがインタラクティブになる（ハイドレーション）
6. まとめ
サーバサイドレンダリング（SSR）は、初期表示速度の向上、SEO対策、アクセシビリティの改善という大きな利点があることの再確認ができました。一方で、クライアントサイドレンダリング（CSR）のような動的な操作の柔軟性も重要なことがわかり、プロジェクトの要件や目標に合わせて適切に使い分けることが必要ということもわかりました。
なんとなくで使用していて気にしたことのない部分でしたが改めて理解できたので次からは適する方をに選択していきたいです。
採用拡大中！
アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニア仲間を大募集しています！
少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！
お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/