Web 開発の世界では、高速でシームレスなユーザー エクスペリエンスを提供することが重要です。これを実現する 1 つの方法は、サーバー側レンダリング (SSR) を使用することです。SSR は、Web ページをクライアントに送信する前にサーバー上でレンダリングできるようにするテクノロジーです。 SSR は、パフォーマンスの向上、SEO の最適化、ユーザー インタラクションの向上など、多くのメリットをもたらします。この記事では、サーバー レンダリングされた React アプリケーションを構築するための人気のある JavaScript フレームワークである Next.js を使用して SSR の基本を学びます。

サーバーサイドレンダリング (SSR) とは何ですか?

従来、Web アプリケーションはクライアント側のレンダリングに依存しており、レンダリング プロセス全体は JavaScript を使用してブラウザ上で行われます。このアプローチは小規模なアプリケーションにはうまく機能しますが、初期ページの読み込みが遅くなり、SEO パフォーマンスが低下し、アクセシビリティが制限される可能性があります。

一方、サーバー側レンダリングでは、サーバー上で完全な HTML コンテンツを生成し、それをクライアントに送信します。その後、クライアントは完全にレンダリングされたページを受け取り、ユーザーに表示できる状態になります。このアプローチにより、検索エンジンがページをより効率的にクロールできるようになり、ユーザーが知覚するパフォーマンスが向上します。

Next.js の概要

Next.js は、組み込みのサーバー側レンダリング機能を提供する React フレームワークです。サーバー側のセットアップと構成の複雑さを抽象化することで、SSR アプリケーションを構築するプロセスを簡素化します。 Next.js は、自動コード分割、クライアント側レンダリング、静的サイト生成などの機能も提供しており、最新の Web 開発にとって多用途の選択肢となっています。

Next.js プロジェクトをセットアップする

Next.js の使用を開始するには、Node.js がコンピューターにインストールされていることを確認してください。プロジェクト用に新しいディレクトリを作成し、次のコマンドを使用して初期化します。 -

このコマンドは、必要なファイルと依存関係を含む新しい Next.js プロジェクトをセットアップします。 -

プロジェクト ディレクトリに入ったら、次のコマンドを使用して開発サーバーを起動します -

Next.js は http://localhost:3000 でローカル開発サーバーを起動し、ブラウザーでアプリケーションが実行されているのを確認できます。

サーバーサイドレンダリングページの作成

Next.js を使用すると、サーバー側でレンダリングされたページを非常に簡単に作成できます。プロジェクト構造で、Pages ディレクトリに移動し、about.js という名前の新しいファイルを作成します。このファイルは、アプリケーションの /about ルートを表します。

about.js に次のコードを追加します -

ファイルを保存し、Next.js 開発サーバーが実行されている場合は、http://localhost:3000/about に移動して、レンダリングされたページを表示できます。

コードを詳しく見てみましょう。 About コンポーネントは、About ページのコンテンツを表す JSX を返す React 機能コンポーネントです。この場合、

見出しと

段落を含む要素がレンダリングされます。

最後のエクスポートのデフォルトの About ステートメントは、About コンポーネントをデフォルトのエクスポートとしてエクスポートします。これにより、Next.js はそれをサーバー側でレンダリングされたページとして認識できるようになります。

/about ルートにアクセスすると、サーバーは About コンポーネントをレンダリングし、クライアントはページの完全な HTML 表現を受け取ります。このアプローチにより、ページがユーザーに送信される前に完全にレンダリングされるようになり、パフォーマンスと SEO が向上します。

動的サーバーサイドレンダリング

Next.js は動的サーバー側レンダリングもサポートしているため、ページをレンダリングする前に外部 API からデータを取得したり、サーバー側で計算を実行したりできます。これにより、クライアント側の JavaScript に依存せずに動的コンテンツをユーザーに提供できるようになります。

動的サーバー側レンダリングをデモンストレーションするために、モック API からデータを取得するページを作成しましょう。ページ ディレクトリに、users.js -

イラスト

上記のコードでは、ユーザー データを prop として受け取る機能コンポーネント Users を定義します。受信したデータを使用してユーザーのリストを表示します。 getServerSideProps 関数は、外部 API (この場合は https://api.example.com/users) からデータを取得する非同期関数です。

getServerSideProps では、フェッチ関数を使用して API に HTTP リクエストを作成し、ユーザー データを取得します。次に、応答を JSON に解析し、ユーザーの変数に割り当てます。最後に、取得したユーザー データを含む props 属性を持つオブジェクトを返します。

ユーザーが /users ルートにアクセスすると、Next.js はサーバー上の getServerSideProps 関数を呼び出してデータを取得します。取得されたユーザー データは、レンダリングのために props として Users コンポーネントに渡されます。これにより、リクエストごとに常に最新のデータを使用してページがレンダリングされるようになります。

動的サーバーサイドレンダリングは、データ駆動型のページを構築し、パーソナライズされたコンテンツをユーザーに配信できる強力な機能です。サーバー上でデータを取得することで、パフォーマンスを最適化し、さまざまなデバイスやネットワーク条件にわたって一貫したユーザー エクスペリエンスを確保できます。

Next.js と JavaScript を使用したサーバーサイド レンダリング (SSR) は、高パフォーマンスの Web アプリケーションを構築する効率的な方法を提供します。 Next.js のサーバー側レンダリング機能を活用することで、完全にレンダリングされたページをユーザーに提供し、パフォーマンス、検索エンジンの可視性、全体的なユーザー エクスペリエンスを向上させることができます。

この記事では、SSR を紹介し、Next.js プロジェクトのセットアップ手順を説明し、サーバー側でレンダリングされるページを作成する方法を示します。サーバーサイド レンダリングの利点と、Next.js が React アプリケーションで SSR を実装するプロセスを簡素化する方法について調査しました。

以上がNext.js と JavaScript を使用したサーバーサイド レンダリング (SSR)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。