Client-side rendering (クライアントサイドレンダリング) (CSR)
クライアントサイドレンダリング (CSR) はブラウザー内で JavaScript を使用して HTML コンテンツを作る手法を指します。 CSR は、サーバーが HTML コンテンツを作る サーバーサイドレンダリング と対照的です。これらの 2 つの技術は互いに排他的でなく、同じアプリケーションで使えます。
純粋な CSR アプリは以下のような HTML コンテンツを返します。
html
<!doctype html>
<html lang="ja-JP">
<head>
<title>My App</title>
<script src="bundle.js"></script>
</head>
<body>
<div id="root"></div>
<noscript>
<p>このアプリはJavaScriptの実行が必要です。</p>
</noscript>
</body>
</html>
そして、実際のページコンテンツは、bundle.js 内の JavaScript によって DOM 操作 を使って作ります。
CSR のメリットは以下の通りです。
- 操作のしやすさ: ルート遷移を含むあらゆるページ更新において、ページ全体の再読み込みが不要です。これにより、アプリの動作がより速く、応答性が高く感じられます。
- パフォーマンス: サーバーは初めの HTML コンテンツと JavaScript アセットを送るだけで良いです。続きのページの更新は API から取ることができ、これは完全な HTML ページを取得するよりも速く、サーバーへの負荷も減ります。
SSR と CSR はどちらもパフォーマンス上のトレードオフがあり、SSR と CSR を組み合わせることで互いの技術のメリットを活かすことができます。例えば、サーバー側で空のプレースホルダーを含むページ骨組みを生成し、クライアント側で追加データを取って必要に応じてページを書き換えられます。
単一ページアプリケーション は、サイトが CSR で無くても良いことに気をつけてください。React, Vue, や Svelte のようなモダンなフレームワークでは、SSR 機能を備えた SPA を作るために使えます。