Web 開発の世界では、高速でシームレスなユーザー エクスペリエンスを提供することが重要です。これを実現する 1 つの方法は、サーバー側レンダリング (SSR) を使用することです。SSR は、Web ページをクライアントに送信する前にサーバー上でレンダリングできるようにするテクノロジーです。 SSR は、パフォーマンスの向上、SEO の最適化、ユーザー インタラクションの向上など、多くのメリットをもたらします。この記事では、サーバー レンダリングされた React アプリケーションを構築するための人気のある JavaScript フレームワークである Next.js を使用して SSR の基本を学びます。
従来、Web アプリケーションはクライアント側のレンダリングに依存しており、レンダリング プロセス全体は JavaScript を使用してブラウザ上で行われます。このアプローチは小規模なアプリケーションにはうまく機能しますが、初期ページの読み込みが遅くなり、SEO パフォーマンスが低下し、アクセシビリティが制限される可能性があります。
一方、サーバー側レンダリングでは、サーバー上で完全な HTML コンテンツを生成し、それをクライアントに送信します。その後、クライアントは完全にレンダリングされたページを受け取り、ユーザーに表示できる状態になります。このアプローチにより、検索エンジンがページをより効率的にクロールできるようになり、ユーザーが知覚するパフォーマンスが向上します。
Next.js は、組み込みのサーバー側レンダリング機能を提供する React フレームワークです。サーバー側のセットアップと構成の複雑さを抽象化することで、SSR アプリケーションを構築するプロセスを簡素化します。 Next.js は、自動コード分割、クライアント側レンダリング、静的サイト生成などの機能も提供しており、最新の Web 開発にとって多用途の選択肢となっています。
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 コンポーネントに渡されます。これにより、リクエストごとに常に最新のデータを使用してページがレンダリングされるようになります。
動的サーバーサイドレンダリングは、データ駆動型のページを構築し、パーソナライズされたコンテンツをユーザーに配信できる強力な機能です。サーバー上でデータを取得することで、パフォーマンスを最適化し、さまざまなデバイスやネットワーク条件にわたって一貫したユーザー エクスペリエンスを確保できます。
＃＃＃結論は＃＃＃この記事では、SSR を紹介し、Next.js プロジェクトのセットアップ手順を説明し、サーバー側でレンダリングされるページを作成する方法を示します。サーバーサイド レンダリングの利点と、Next.js が React アプリケーションで SSR を実装するプロセスを簡素化する方法について調査しました。
以上がNext.js と JavaScript を使用したサーバーサイド レンダリング (SSR)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
