React はサーバー側のレンダリングに Next.js を使用します

React は、最新の Web アプリケーションを構築するための人気のある JavaScript ライブラリです。ただし、React はクライアント側でレンダリングするときに多くの JavaScript コードを必要とするため、アプリケーションのパフォーマンスと SEO の最適化に影響します。これに対処するには、サーバーレンダリング (SSR) を使用してパフォーマンスと SEO の最適化を向上させることができます。この記事では、サーバーでレンダリングされる React アプリケーションに Next.js を使用する方法を詳しく見ていきます。

Next.jsとは何ですか?

Next.js は、サーバーでレンダリングされる React アプリケーションを構築するための React ベースの JavaScript フレームワークです。React アプリケーションの開発とデプロイメントを簡素化するために、自動コード分割、プリレンダリング、静的エクスポートなどの多くの便利な機能を提供します。Next.js は、サーバー環境として Node.js を使用し、クライアント側のレンダリングフレームワークとして React を使用します。
Next.js の利点:

サーバーレンダリング: Next.js はサーバーレンダリングをサポートしており、サーバー側で React コンポーネントをレンダリングし、HTML 文字列をクライアントに送信できるため、パフォーマンスと SEO の最適化が向上します。
自動コード分割: Next.js は、コードを自動的に小さなチャンクに分割して、ページの読み込み時間を短縮し、パフォーマンスを向上させることができます。
プリレンダリング: Next.js は、ビルド時にページを自動的にプリレンダリングし、後続のリクエストで静的 HTML を提供することで、パフォーマンスを向上させることができます。
静的エクスポート: Next.js は、静的 Web サイトホスティングサービス (GitHub Pages、Netlify など) に簡単にデプロイできるように、ページを静的 HTML ファイルとしてエクスポートできます。
複数のデータソースのサポート: Next.js は、複数のデータソース (API、データベース、ファイルシステムなど) からデータを取得し、それを props として React コンポーネントに渡すことができます。
使いやすさ: Next.js は、ルーティング、スタイル、レイアウトなどの多くの便利な機能を提供し、React アプリケーションの開発を簡単かつ容易にします。

Next.js を使用してサーバーレンダリングされた React アプリの手順:

Next.js アプリケーションを作成する
まず、Next.js や React などの依存関係をインストールし、Next.js アプリケーションを作成する必要があります。

npx create-next-app my-app
cd my-app
npm run dev

これにより、http://localhost:3000 で Next.js 開発サーバーが起動します。

ページの作成
次に、React コンポーネントをレンダリングするページを作成する必要があります。ページディレクトリの下に新しいファイルを作成し、その中に React コンポーネントを書き込むことができます。

import React from 'react';

function Home() {
    
    
  return (
    <div>
      <h1>Hello, Next.js SSR!</h1>
    </div>
  );
}

export default Home;

上記のコードでは、サーバー側とクライアント側でレンダリングするための単純な React コンポーネントが定義されています。このページは、http://localhost:3000/ にアクセスすると表示されます。

サーバー側レンダリングに getInitialProps メソッドを使用する
次に、サーバー側レンダリングに getInitialProps メソッドを使用する必要があります。getInitialProps メソッドは、コンポーネント内で定義してサーバーとクライアントの両方で実行できる静的メソッドです。

import React from 'react';

function Home({
     
      data }) {
    
    
  return (
    <div>
      <h1>{
    
    data.title}</h1>
      <p>{
    
    data.body}</p>
    </div>
  );
}

Home.getInitialProps = async () => {
    
    
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();
  return {
    
     data: post };
};

export default Home;

上記のコードでは、getInitialProps メソッドを使用して API からデータを取得し、そのデータを props としてコンポーネントに渡します。これにより、サーバー側でレンダリングされるときにコンポーネントにデータが含まれるようになります。getInitialProps メソッドはページコンポーネントでのみ使用できることに注意してください。

クライアントナビゲーションに Link コンポーネントを使用する
次に、クライアントナビゲーションに Link コンポーネントを使用する必要があります。Link コンポーネントは Next.js によって提供されるコンポーネントで、クライアント側で別のページに移動するために使用されます。

import React from 'react';
import Link from 'next/link';

function Home({
     
      data }) {
    
    
  return (
    <div>
      <h1>{
    
    data.title}</h1>
      <p>{
    
    data.body}</p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
}

Home.getInitialProps = async () => {
    
    
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();
  return {
    
     data: post };
};

export default Home;

上記のコードでは、Link コンポーネントを使用して、/about ページに移動するリンクを作成します。Link コンポーネントはページコンポーネント内でのみ使用できることに注意してください。

追加ページの作成
最後に、追加ページを作成して完全な React アプリケーションを構築できます。ページディレクトリの下に別のファイルを作成し、その中に別のページコンポーネントを書き込むことができます。

import React from 'react';

function About() {
    
    
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
    </div>
  );
}

export default About;

上記のコードでは、サーバー側とクライアント側でレンダリングするための単純な React コンポーネントが定義されています。このページは、http://localhost:3000/about にアクセスすると表示されます。

結論として、Next.js を使用すると、サーバーでレンダリングされた React アプリケーションを迅速かつ簡単に構築できます。サーバーレンダリングとクライアント側のナビゲーションは、ページコンポーネントを作成したり、getInitialProps メソッドを使用したり、リンクコンポーネントを使用したりすることによって実行できます。

React はサーバー側のレンダリングに Next.js を使用します

Next.jsとは何ですか?

おすすめ