Client-Side Rendering と Server-Side Rendering の違い
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