🧑‍🎨

Client-Side Rendering と Server-Side Rendering の違い

2023/09/24に公開

Next.js では 以下三つのレンダリング方法を選択することができる

  • 1️⃣ Client-Side Rendering
  • 2️⃣ Server-Side Rendering
  • 3️⃣ Static Site Generation

ここでは 1️⃣ Client-Side Rendering と 2️⃣ Server-Side Rendering の違いについて整理する

Client-Side Rendering

いわゆる従来のReactのレンダリング方法。

最初のリクエスト時に、サーバーサイドからはほぼ中身のないHTMLファイルと1つのJSファイルが返ってくる。実際に表示するUIはそのHTMLファイルの中で読み込まれているJavaScriptが動くことによって描画される。

例えば create-react-app で作成したアプリケーションのページを確認してみると、 「Edit src/App.js and save to reload.」 と表示されているが、ソースコードにはそのテキストは見当たらない。

このテキストはブラウザがHTMLファイルを受け取った後にJavaScriptが動いて描画してくれているだけであって、あくまでもサーバーが返すのはそのUIが描画される先の div が一つ存在しているだけのHTMLファイルとなっている。

🌏 表示されているページ

📝 ソースコード

🚧 JavaScript が無効になっていると...

したがってJavaScriptを無効にした状態でページを表示しようとすると<div id="root"></div>に描画されるはずだったUIは描画されなくなる。

Server-Side Rendering

Server-Side Rendering では、先ほどの Client-Side Rendering の時のように最初のリクエスト時に1つのHTMLファイルが返されるのではなく、各ページのリクエストごとに HTMLファイルを生成して返却する。

例えば create-next-app で作成したアプリケーションのルートページには 「Welcome to Next.js!」 と表示されており、ソースコードにもそのテキストが含まれているのが確認できる。

つまり、このページのコンポーネントが事前にサーバー側でレンダリングされHTMLファイルを生成し、そのHTMLをブラウザに返却したことがわかる。

🌏 表示されているページ

📝 ソースコード

🚧 JavaScript が無効になっていると...

したがって、この場合は JavaScript が無効になっていたとしてもHTMLに含まれている情報自体は表示される

Discussion