Next.jsを少しずつ理解していく6【事前レンダリング】

今回はNext.jsの事前レンダリング(pre-rendering)について紹介します。ReactのCSRとNext.jsのSSR/SSGの、計3つのレンダリング型の違いと特徴について詳しく解説していきます。

Next.jsとReactの違い

ReactとNext.jsの違いを「レンダリングのタイミング」に注目して一言で言えばこのようになります。

  • React:サーバーが空のHTMLページを送信し、ブラウザ側でJavaScriptがDOMを生成して表示する
  • Next.js:サーバー側で全てのHTMLを生成し、完成したファイル(ページ)をブラウザに送信する

 

レンダリングとは?

もととなる数値データを計算して表示すること。Webサイトの場合は、HTMLファイルなどをもとにユーザーが閲覧できるページを表示すること。

 

ここでは、ReactとNext.jsの違いを「レンダリングのタイミング」やその他の特徴を織り交ぜて解説していきます。また、Next.jsにはSSRとSSGという2つのレンダリング型が用意されていますので、ReactのCSRと合わせて全部で3つの型について解説します。

CSR(React)

ReactのCSR(Client Side Rendering)は、リクエストを受けたサーバー側が空のHTMLファイルを生成しクライアント(ブラウザ)に送信します。それを受け取ったクライアントはブラウザ上でJavaScriptを実行してDOMを生成し、(デフォルトでは<div id="root"></div>に)マウントすることでコンテンツを表示させます。ページの初期ロードで読み込まれるのはマウントに必要な最低限のHTMLだけです。

マウントとは

DOMノードを生成し、DOMツリーへ追加すること。
上の例では、<div id="root"></div>にReactコンポーネントを表示すること。

 

試しにJavaScriptを無効にしてCSRを採用しているサイトにアクセスしてみるとコンテンツがなにも表示されません。これは、JavaScriptが動かないとデータの取得やDOMの生成ができないからです。

 

引用:Pre-rendering and Data Fetching

 

URLごとに個々のファイル(ページ)が生成されるNext.jsと違い、Reactは単一のページが1つ生成されるだけで、疑似的なページ遷移によってUIを切り替えるため「SEOに弱い」という特徴があります。Reactで生成されたアプリケーションが検索エンジンにヒットしても、検索エンジンが認知できるのは<div id="root"></div>だけです。

 

また、JavaScriptを用いてブラウザ側でDOMの生成を行うため、JavaScriptのデータサイズが大きいほど初期表示に時間がかかります。クライアントのスペックによってはさらに時間がかかる場合もありますが、最近はデバイスの高性能化に伴いその点は解消されつつあります。

SSR(Next.js)

Next.jsのSSR(Server Side Rendering)ではクライアントからのリクエスト毎にサーバー側でレンダリングを行い、生成したHTMLファイルなどをクライアントに送信します。

つまりサーバー側でHTMLファイルを生成するため初期表示が高速であり、またURLごとに個々のファイル(ページ)が生成されるためSEOに強いです。

引用:Pre-rendering and Data Fetching

SSG(Next.js)

SSG(Static Site Generation)はビルド時にサーバー側で全てのレンダリングを行い、生成したHTMLなどのファイルをCDNにキャッシュさせます。クライアントからリクエストがあると、CDNが対応するファイルをクライアントに送信しブラウザがそれを受け取って表示します。

SSRと違うのは、クライアントからのリクエストより前(ビルド時)にすべてのページのレンダリングを行っている点です。事前にファイルを生成してCDNにキャッシュするので、SSRよりもさらに高速に表示できます。

CDNとは?

CDN(Content Delivery Network)とは、世界中に張り巡らされた配信ネットワークを利用して、Webサイトにアクセスしようとするユーザーに効率的かつ高速にWebコンテンツを配信する仕組みです。
これにより、Webサイトの表示を高速化させたり、たくさんの人が同時にアクセスしても遅くならないようにすることができます。

まとめ

  • CSRは、サーバー側で空のHTMLファイルを生成/送信し、クライアント側でJavaScript使ってDOMを生成する
  • SSRは、クライアントのリクエストがあった場合に、サーバー側でレンダリングを行い、生成したファイルをクライアントに送信する
  • SSGは、ビルド時にすべてのページのファイルを生成してCDNにキャッシュさせ、クライアントはCDNからファイルを受け取り表示する

 

Next.jsのSSRやSSGは「SEOに強い/表示速度が速い」などのメリットがあるためECサイトやブログの構築に向いています。

一方でユーザーが頻繁にコンテンツの操作(チャット/検索など)やページ遷移を行うサイトの構築には不向きです。

例えば航空チケットの検索サイトをSSR/SSGで構築した場合、検索する度にページ遷移が発生するため待ち時間が長くなります。

よってそのようなサイトを作る場合は、ReactのCSRを採用すると良いでしょう。Reactは疑似的なページ遷移によって(実際には)同一ページ上でユーザーの操作に応じたデータ取得や表示切替を行うことができるため、待ち時間を抑えることができるようになります。

 

次回はSSG(静的サイトジェネレーター)について解説します。

 

コメントを残す

CAPTCHA