Next.js の CSR を理解する: クライアント側レンダリングの説明

CSR (クライアントサイド レンダリング) は、クライアント側でページをレンダリングする方法です。つまり、サーバー上では実行されません。 CSR は本質的に SPA (シングル ページ アプリケーション) と同じであるため、SPA とは何か、その仕組みを理解していれば、CSR についてはすでに理解していることになります。ただし、SPA が何なのか、どのように機能するのかがわからない場合は、以下で説明します。

この記事では、SPA とは何か、そしてその仕組みについて説明します。その後、これを Next.js の CSR と比較し、Next.js プロジェクトに CSR を実装する方法を示します。

スパとは何ですか？

SPA (シングル ページ アプリケーション) は、インタラクションごとに新しい HTML ページをロードするのではなく、必要に応じてコンテンツを動的に書き換える単一の HTML ページで構成されます。

MPA はどのように機能しますか?

SPA を理解する前に、まず MPA について知っておく必要があります。それについて学びましょう:

SPA が普及する前は、Web サイトはマルチページ アプリケーション (MPA) アプローチを使用して構築されていました。では、MPA はどのように機能したのでしょうか?あなたが開発者として、ホームページ (「/」) と概要ページ (「/about」) の 2 つのページを持つ Web サイトを作成したいと考えていると想像してください。マルチページ方式を使用してこれを構築するには、ルートごとに 2 つの別個の HTML ファイル (「/」の場合は main.html、「/about」の場合は about.html) を作成する必要があります。

各 HTML ファイルには、そのページに固有の HTML、CSS、および JavaScript コードを記述する必要があります。ただし、ヘッダーやフッターなどのコードの一部は、2 つのページすべてで同じです。ヘッダーとフッターが同一であっても、開発者は各 HTML ファイルでヘッダーとフッターを繰り返す必要があります。

プロジェクトが完了してサーバーにデプロイされると、サーバーは要求されたすべてのリソースとともに完全な HTML ページをユーザーに送信します。たとえば、ユーザーが初めてホームページにアクセスすると、サーバーは準備が整った main.html ファイルを送信し、ユーザーは少し待つとすぐにコンテンツを確認できます。この方法は、検索エンジンのクローラーが Web サイトにアクセスすると、事前に完全にレンダリングされているため、HTML ファイル内のすべてのコンテンツを確認できるため、SEO に適しています。

ただし、ユーザーが「/about」などの別のページに移動すると、プロセスが再び開始されます。サーバーは、about.html ファイルとそのすべてのリソース (CSS、JS など) を送信します。ユーザーはページが読み込まれるまでもう一度待つ必要があり、インターネット接続が遅い場合は待ち時間が長くなります。さらに非効率なのは、ヘッダーとフッターが変更されていない場合でも、ユーザーが同じコードを再度ダウンロードする必要があることです。このようなコードの繰り返し (ヘッダーやフッターなど) は、今日の Web 開発実践では無駄で非効率的です。

スパはどのように機能しますか?

MPA (マルチページ アプリケーション) がどのように機能するかを理解したところで、SPA がどのように機能するかを見ていきましょう。

リクエストごとにページをロードする際の遅延、コードの繰り返し、毎回 DOM 全体を再構築する必要があるため、これらの問題を解決するために SPA が導入されました。

あなたは、「/」と「/about」という 2 つのルートを持つ Web サイトを作成している開発者であると想像してください。 SPA フレームワークには、index.html という HTML ファイルが 1 つだけあります。ルートごとに個別の HTML ファイルを作成する代わりに、ページごとにコンポーネントを作成し、それらを動的に読み込みます。たとえば、ルートごとに 1 つずつ、合計 3 つのコンポーネントを作成し、index.html にインポートします。

SPA では、サイトの再利用可能なセクション (ヘッダーやフッターなど) を独自のコンポーネントに分離することもできます。各ページに同じヘッダーとフッターのコードを記述する代わりに、関数の動作と同様に、必要に応じてこれらのコンポーネントをインポートするだけです。これにより、繰り返しが減り、開発が容易になります。

SPA プロジェクトがサーバーにデプロイされると、サーバーはページのコンテンツをレンダリングしなくなります。代わりに、コンポーネントを含む JavaScript バンドルとともに、index.html ファイルを提供します。レンダリングはクライアント側、ブラウザで行われます。

ユーザーがサイトに初めてアクセスすると、サーバーは必要な JavaScript ファイルとともにindex.html ファイルを送信します。これにより、JavaScript が完全にダウンロード、解析、実行された後に DOM 全体が構築されるため、MPA と比較して待ち時間が長くなる可能性があります。

ただし、最初のページが読み込まれると、SPA ではページ間の移動がはるかに高速になります。たとえば、ユーザーが / から /about に移動した場合、ブラウザはページ全体をリロードする必要はありません。ヘッダーやフッターなどの共通要素はすでに読み込まれているため、ブラウザーは変更される特定のコンテンツ (/about ページのコンテンツなど) の JavaScript のみをフェッチします。 DOM はページ全体を更新せずに動的に更新されるため、ユーザーは従来の Web サイトではなくアプリを操作しているように感じます。これにより、よりスムーズで「アプリのような」エクスペリエンスが提供されます。

ただし、特に SEO に関しては、SPA にはマイナス面もあります。初期のindex.htmlファイルには最小限のコンテンツが含まれているため(ほとんどのデータはJavaScriptを通じてロードされます)、検索エンジンのクローラーは空のページを認識し、コンテンツのインデックス作成が困難になる可能性があります。これが、SPA での SEO が従来の MPA に比べて難しい理由です。

CSRはSPA手法と同じですか？

はい、CSR (クライアントサイド レンダリング) はレンダリング手法の 1 つで、コンポーネントをブラウザーで表示できる形式に変換し、ユーザーがページを表示できるようにするプロセスを意味します。理解しておくべき重要なことは、CSR は完全にブラウザー内で行われるということです。 React と Next.js の両方で、CSR は同じように機能します。クライアント側のレンダリングに関しては、両者に違いはありません。

たとえば、CSR では、Web サイトに初めてアクセスすると、サーバーは最小限のコンテンツを含む Index.html ファイルを送信します。ただし、ここに問題があります。このファイルにはまだ完全なコンテンツが含まれていません。実際のコンテンツは、必要なコンポーネント ファイル (JavaScript、CSS など) がすべてダウンロードされた後にブラウザーに表示されます。次に、React は DOM ツリー (ドキュメント オブジェクト モデル) を構築し、続いて実際の DOM の軽量コピーのような仮想 DOM を作成します。

DOM と仮想 DOM が設定されると、ユーザーはページを表示できるようになります。このレンダリングのプロセスはブラウザーで実行され、すべてのコンポーネントが表示可能なページに変換されます。

ユーザーがあるページから別のページに移動すると (/ から /about など)、React は新しいページ用に新しい仮想 DOM を構築します。古い仮想 DOM と新しい仮想 DOM を比較し、相違点を見つけて、それらの変更を実際の DOM に適用します。 DOM の比較と更新のこのプロセスは効率的に行われ、すべてブラウザー内で行われます。

まとめると、CSR は React と Next.js の両方で同じように機能します。レンダリングはブラウザーで行われ、React は仮想 DOM を使用して DOM 更新を効率的に処理するため、ユーザー エクスペリエンスがスムーズかつ高速になります。

Next.js で CSR を実装するにはどうすればよいですか?

コンポーネント内で getStaticProps や getServerSideProps などのサーバー側メソッドではなく、useEffect などのクライアント側メソッドを使用する場合、ページは CSR (クライアント側レンダリング) メソッドに従ってクライアント上でレンダリングされます。これは、最初の HTML が読み込まれた後にブラウザがレンダリングを処理することを意味します。

さらに、SWR や TanStack Query などのライブラリを使用すると、CSR も有効になります。これらのライブラリは、ページの読み込み後にクライアントでデータの取得を処理するためです。このようにして、コンポーネントはブラウザーでレンダリングされ、データの更新はサーバー側の介入なしにクライアント側でシームレスに行われます。

結論

CSR はクライアントでプロジェクトをレンダリングする方法であり、本質的に SPA (シングル ページ アプリケーション) の定義と同じです。 React はレンダリングに CSR を使用します。これが MPA (マルチページ アプリケーション) と SPA の主な違いの 1 つです。 Next.js は React 上に構築されているため CSR も使用しますが、SEO を改善し、ユーザー エクスペリエンスを向上させるために、Next.js には SSG、ISR、SSR が追加されています。 SSR、ISR、SSG について読むことができます。私の最新記事の最新情報を入手したい場合は、私のウェブサイト https://saeed-niyabati.ir をフォローしてください。読んでいただきありがとうございます。さようなら!

以上がNext.js の CSR を理解する: クライアント側レンダリングの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。