メインコンテンツへ
開発技術Webテクノロジ

SSR(サーバサイドレンダリング)とCSR(クライアントサイドレンダリング)を比較した説明として最も適切なものはどれか。

ア.SSRはサーバでHTMLを生成してクライアントに送るため初期表示が速くSEOに有利。CSRはブラウザがJavaScriptでHTMLを生成するため初期ロードの体感が遅くなりやすいがインタラクションは高速になる傾向がある。正解
イ.CSRはSSRの進化版であり、SSRはすでに時代遅れの技術として使われていない。
ウ.SSRはサーバの負荷がCSRより低い。なぜならSSRではHTMLの生成処理をクライアントが担うため。
エ.CSRではサーバがすべてのレンダリングを担うため、クライアントの性能に関わらず一定の表示速度が保証される。

解説

SSRとCSRは「弁当の作り方」の違い。SSRはお店(サーバ)で弁当を作って届ける方式——受け取ったらすぐ食べられる。CSRはお弁当箱と食材(JS)だけ届けて、客(ブラウザ)が自分で作る方式——準備に時間はかかるが、あとは自由自在。

なぜ ア が正解か

SSR(Server-Side Rendering): サーバ側でHTMLを完成させてブラウザに送信。ブラウザがHTMLを受け取った瞬間にコンテンツが表示される。初期表示が速く、クローラーがHTMLを読めるのでSEOに有利。Next.js・Nuxt.jsのSSRモードが代表例。CSR(Client-Side Rendering): ブラウザが最小限のHTMLとJSバンドルを受け取り、JSを実行してDOMを構築する。初期表示まで時間がかかるが、以降のページ遷移はサーバ通信なしで高速。React SPA・Vue SPAが代表例。

なぜ イ は間違いか

SSRは時代遅れではなく、Next.js(React)やNuxt.js(Vue)などの主要フレームワークがSSRを積極的に採用している。CSRとSSRは用途に応じて使い分ける。

なぜ ウ は間違いか

SSRはサーバがHTMLを生成するためサーバ負荷が高い。CSRは生成処理をクライアントが担うためサーバ負荷が低い。説明が逆。

なぜ エ は間違いか

CSRのレンダリングはクライアント(ブラウザ)が担う。サーバが担うのはSSR。CSRではクライアントの性能(CPUパワー・メモリ)が表示速度に直接影響する。

出典: AI生成問題(学習用)