はじめに
Webブラウザにおけるレンダリングとは、WebサイトのHTMLやCSS、JavaScriptファイルをそのままのコードではなく、画像・映像などの形式として閲覧できる形に変換することです。
Webアプリケーションのレンダリング手法は様々ありますが、本記事ではCSR(Client Side Rendering)、SSR(Server Side Rendering)の違いについて、まとめます。
CSR
CSRでは、クライアントからのリクエストに対してJS、CSS、ほぼ空のHTMLファイルがサーバーから返却されます。その後、クライアント側でJavaScriptを実行し、APIから取得したデータなどをもとにレンダリングします。
単一のWebページを読み込み、別の内容を表示する際にはJavaScriptを通じて内容を更新するSPA(Single Page Application)を実現するためには必須の技術といえます。
一度ページを読み込んでしまえば、画面遷移しても画面全体を再描画する必要がなくなるというメリットがあります。
一方で、初回表示に時間がかかる・パフォーマンスがユーザーの環境に依存する・SEOで不利になるといったデメリットがあります。
以上のことから、画面遷移をする機会が多いアプリやSEOを意識する必要がないアプリにはCSRは適しているといえるでしょう。
SSR
SSRでは、クライアントからリクエストが送信されるとサーバー側でJavaScriptを実行し、JS、CSS、レンダリングされたHTMLファイルがサーバーから返却されます。
ただし、サーバー側でレンダリングされるのは静的なHTMLであり、ユーザーが操作できない状態となっています。そのため、クライアント側で再度レンダリングを行い、サーバー側でレンダリングされたHTMLにイベントハンドラーが登録されます。この過程はハイドレーションと呼ばれ、サーバーとクライアントそれぞれでレンダリングされたHTMLの内容に差があるとハイドレーションエラーが発生します。
CSRとは対照的に、初回表示にかかる時間が短い・パフォーマンスがユーザーの環境に依存しない・SEOに強いといったメリットがあります。
一方で、アクセスする度にサーバーに負荷がかかる、CSRに比べて設計が難しいなどのデメリットがあります。
以上のことから、コンテンツ更新頻度の高いアプリやSEOを意識する必要があるアプリにはSSRは適しているといえるでしょう。
まとめ
本記事では、CSRとSSRの違いについてまとめました。Next.jsやNuxtでは、CSR/SSRの機能が提供されており、必要に応じて使い分けることが求められるでしょう。