サーバーサイドレンダリング

📖 もうちょい詳しく

何が新しいの？

ひと頃のウェブは、ブラウザに届いたあとから中身を組み立てる方式が広がりました。ただこの方式だと、最初の表示までに少し待たされたり、検索エンジンが中身を読み取りにくかったりすることがあります。そこで改めて見直されたのが、サーバー側で先に画面を組み立てておく「サーバーサイドレンダリング」です。

どうやって動いてるの？

利用者がページを開くと、サーバーがそのページの中身（HTML）を組み立てて、できあがった状態で送り返します。ブラウザは届いたHTMLをそのまま表示できるので、最初の絵がすぐに出ます。そのあと必要に応じて、ボタンの反応などの細かい動きをブラウザ側で足していくことが多いです。

何ができるの？

最初の表示が速くなりやすいので、開いた瞬間に画面が真っ白で待たされる感じが減ります。中身が最初からHTMLに入っているため、検索エンジンにも読み取られやすくなります。ニュースサイトや商品ページなど、表示の速さと検索での見つけやすさが大事な場面で使われます。

🌱 身近なたとえ

お弁当で例えると分かりやすいです。注文を受けてから材料だけ渡されて、自分で詰めるのが「ブラウザ側で組み立てる方式」です。サーバーサイドレンダリングは、できあがったお弁当を渡してもらう感じで、受け取ってすぐに食べられます。中身が見える状態で届くので、外から確認する人（検索エンジン）にも分かりやすいわけです。

✅ まず覚えるポイント

• 画面のHTMLを「サーバー側」で組み立ててから返す方式です
• 最初の表示が速くなりやすいのが利点です
• 中身が最初からHTMLにあるので、検索エンジンに読まれやすいです
• 略して「SSR」と呼ばれます
• 表示したあと、細かい動きはブラウザ側で足すことが多いです
• 速さと検索のしやすさが大事なサイトと相性がよいです

🧭 よくある勘違い

サーバーサイドレンダリングなら何でも速いの？

最初の表示が速くなりやすい一方、サーバーがHTMLを組み立てる分の手間はかかります。アクセスが多いとサーバーの負担が増える場合があり、必ずしもすべてが速くなるわけではありません。場面に応じて使い分けるのが現実的です。

ブラウザ側では何も動かないの？

そうとは限りません。最初の画面はサーバーが用意しますが、そのあとボタンや入力への反応など、こまかな操作はブラウザ側のプログラムが受け持つことが多いです。両方を組み合わせて使うのが一般的です。

🧩 関連して覚えると楽な言葉

• ハイドレーション: サーバーが返したHTMLに、後からJavaScriptを差し込んで動かす処理です
• SPA: 1枚の画面を切り替えて動かす作りのウェブアプリです
• HTML: ウェブページの中身を書くための言葉です
• SEO: 検索結果で見つけてもらいやすくする工夫のことです

🏁 ひとことでまとめ

完成した画面をサーバーで先に用意して渡すから、開いてすぐ見えて、検索エンジンにも中身が伝わりやすい仕組みです。