最近会社でReactを使用するプロジェクトに配属されたため、勉強も兼ねてアウトプットしていこうと思います。

まだ駆け出しということもありかなり初心者向けの記事になりますが、ご了承ください。

Reactはクライアントサイド（ブラウザ上）で実行しますが、Webアプリケーションを作成するとなると必ずサーバーサイドの構築も必須となることがほとんどです。

サーバーサイドの構築が必須となる理由は具体的に以下の2つです。

サーバーサイドの構築が必須となる理由

初期表示のスピードを向上させるため

サーバーサイドレンダリング（SSR）を利用することで、サーバー側でHTMLを生成し、完成した状態のHTMLをクライアントに送信することができます。

これによって、初期表示が高速化され、ユーザーがページをすぐに確認することができます。

SEOの最適化のため

SEOで評価されたいテキストやリンクといった要素は、サーバーサイドレンダリングで出力することが推奨されます。

これは、クライアントサイドレンダリングではGoogleがJavaScriptを完全に解釈できず、情報を正確に認識できない可能性がある一方で、サーバーサイドレンダリングでは情報が直接HTMLとして認識されるため、Googleが正確に読み取りやすくなるためです。

クライアントとサーバーの違い

クライアントとサーバーでは利用できる機能や動作環境が異なるため、それに合わせたコードを書く必要があります。

クライアントサイド（ブラウザ）では、documentやwindowなどのブラウザ特有のオブジェクトを操作できますが、サーバーサイド（Node.jsなど）ではそれらは存在しません。

一方、サーバーサイドでは、fsモジュール（ファイルシステム操作）やデータベースアクセスといったAPIが使えますが、クライアント側ではこれらを直接利用することはできません。

Reactで使用できるサーバーサイドレンダリングのツール

サーバーサイドレンダリングを実現するためのツールやフレームワークは多数存在します。

その中でも特に人気があり、Reactと組み合わせて使用されるものをいくつか紹介します。

Next.js

Nextは、Zeit社によって考案されたオープンソースの技術で、Nextを使うことでReactのアプリケーションを簡単にサーバー上で実行することができます。

Nextはルーティングや静的ページのコンパイル、サーバーレスなAPIエンドポイントの作成など様々な機能を使用することができます。

以下にNext.jsでできることを具体的に書き出してみます。

静的サイト生成

Next.jsは、ビルド時にページを事前に生成し、静的ファイルとしてホスティングする機能があります。これは、ブログや商品ページのような変更頻度が低いページに適しており、ページのパフォーマンスが向上します。

ハイブリッドレンダリング

SSRとSSGの両方をプロジェクト内で併用することが可能です。例えば、動的なダッシュボードはSSRで生成し、ブログ記事や商品一覧はSSGで生成する、といった柔軟な構成も可能です。

ミドルウェアとAPIルート

Next.jsには、APIエンドポイントを作成するためのサーバーレスAPIルート機能があり、追加のバックエンドフレームワークを使用せずに、簡単にAPIを構築できます。

また、リクエストの処理をカスタマイズするためのミドルウェア機能もサポートしています。

pages/api/hello.js

export default function handler(req, res) {
    res.status(200).json({ message: 'Hello, API!' });
}

ブラウザでhttp://localhost:3000/api/hello にアクセスすると、以下のJSONが返されます

{ "message": "Hello, API!" }

ミドルウェアの例

middleware.js

import { NextResponse } from 'next/server';

export function middleware(req) {
    const url = req.nextUrl.clone();
    // ユーザーが認証されていない場合、ログインページにリダイレクト
    if (!req.cookies.auth) {
        url.pathname = '/login';
        return NextResponse.redirect(url);
    }
    return NextResponse.next();
}

ユーザーが認証済みでない場合、ログインページ(/login)にリダイレクトされます。

画像最適化

Next.jsは、画像の遅延読み込みやサイズ最適化を自動で行うnext/imageコンポーネントを提供しています。これにより、画像のパフォーマンスの向上が図れます。

開発者体験の向上

Next.jsは、ホットリロード、TypeScriptのサポート、ESLintの統合など、開発者の生産性を高める機能を標準で提供します。これにより、モダンな開発環境を簡単に構築できます。

インターナショナライゼーション（i18n）

多言語対応の機能を持ち、アプリケーション内で簡単にロケール（地域設定）に基づいたページを切り替えることができます。

デプロイの簡易化

Next.jsはVercel（Next.jsを開発した会社）との統合がスムーズで、簡単にアプリケーションをデプロイできます。また、グローバルCDNによる高速な配信も可能です。