4.
コンポーネントの基本
レンダリング
レンダリングとは
レンダリング（Rendering） とはデータやコードを画面に表示できる形に変換することで、ユーザに対して「画面で見えるようにすること」です。
| 内容 | レンダリングのイメージ |
|---|---|
| HTML + CSS + JS | ブラウザでページとして表示される |
| React のコード | 画面にボタンや文字として見えるようになる |
| ゲームの3Dモデル | 画面にキャラや背景として表示される |
SPA と MPA
Webアプリケーションでは、Webページ１ファイルで全画面表示するSPA（Single Page Applica tion） と、複数のWebページで各ページを画面表示する MPA（MPA（Multi Page Application） の2つの方式があります。
| 項目 | SPA（Single Page Application） | MPA（Multi Page Application） |
|---|---|---|
| ページ構成 | 1つのHTMLページで完結 | 複数のHTMLページで構成される |
| 動作方法 | JavaScriptでページ遷移・描画を制御 | 各ページにアクセスごとにHTMLを読み込み |
| 特徴 | 高速な操作感、動的なUI | 初回表示が早くSEOに強い |
| 使用技術 | React, Vue, Angular など | HTML, PHP, Node.js などのサーバーサイド技術 |
| メリット | ページ遷移が速い、アプリのような動作 | URLごとにページ分離しやすい、SEO対応しやすい |
| デメリット | 初回読み込みが重い、SEO対応が難しい | ページ遷移が遅い、開発が複雑になりがち |
レンダリング方式
Next.jsのレンダリング方式は以下の４つ（CSR・SSR・SSG・ISR）が用意されています。
| レンダリング方式 | 説明 |
|---|---|
| CSR | ブラウザでHTMLレンダリング |
| SSR | サーバーで動的にHTMLレンダリング |
| SSG | サーバーで静的にHTMLレンダリング |
| ISR | SSGをベースに「revalidate」で指定した時間で再レンダリング |
CSR (Client-Side Rendering)
CSR（クライアントサイドレンダリング）は、クライアントサイド（ブラウザなど）でJavaScript実行し、仮想DOMなどからHTMLページを動的生成します。
メリット
高度なインタラクティブ性や動的な更新が可能であり、サーバー負荷を減らすことができます。
デメリット
JavaScript実行によるブラウザ側の負荷や初回のページロードが遅くなる傾向があります。また、SEO対策で不利になる可能性があります。
SSR (Server-Side Rendering)
SSR（サーバーサイドレンダリング）は、ユーザリクエストでサーバーサイドでHTMLページ生成してレスポンスします。ブラウザでは既に表示可能なコンテンツです。
メリット
SEO向上、初回表示の高速化、クライアント側の負荷軽減など。
デメリット
リクエスト毎にサーバーがページをレンダリングするため、サーバー負荷が増加する可能性があります。
SSG (Static Site Generation)
SSR（サーバーサイドジェネレーション）は、ビルドでHTMLページを生成し、静的コンテンツをレスポンスします。ユーザリクエスト毎にHTMLを表示するため、サーバーレンダリングの必要はありません。
メリット
ページ読み込みが高速で、CDN (Content Delivery Network) などでコンテンツをキャッシュできるため、高いパフォーマンスが期待できます。
デメリット
動的コンテンツが必要な場合は、クライアントサイドでデータ取得や更新が必要です。
ISR（Incremental Static Regeneration）
ISR（Incremental Static Regeneration）はSSGの一種です。HTMLをキャッシュしながらリクエストから有効期限が過ぎたら、データ再取得とレンダリングをします。
メリット
SSGと同様にコンテンツを高速に読み込み、動的コンテンツと静的コンテンツをリアルタイムにバランスよく更新できます。
デメリット
キャッシュ管理が複雑になり、静的コンテンツと動的なキャッシュの効率的に対応する必要があります。
クライアントコンポーネント
"use client"
import { useEffect, useState } from 'react';
export default function Home() {
}
App Router
App Router とは
Next.js 13 から Next.js では App Router が採用され、
app/ フォルダ内に配置したフォルダとファイルで URLルーティングする機能が追加されました。SSRに対応した Server Component と CSR に対応した Client Component の方式があります。
| 項目 | Server Component | Client Component |
|---|---|---|
| 実行タイミング | サーバー上（ビルド時またはリクエスト時） | ブラウザ上（クライアント） |
| レンダリング | SSR, SSG, ISR | CSR |
| 主な用途 | データ取得、レイアウト、初期表示 | 状態管理、ユーザー操作、イベント処理 |
| 使用可能な機能 | fetch, DBアクセス, 環境変数など | useState, useEffect, DOM操作など |
| 使い方 | デフォルト | "use client" を冒頭に記述が必要 |
| パフォーマンス | 高速・軽量（JSバンドルに含まれない） | JSバンドルに含まれる（やや重い） |
| DOM操作 | 不可 | 可能 |
Server Component
Server Component（サーバーコンポーネント）はクライアントからのリクエストでサーバーサイドでHTMLレンダリングしてレスポンスします。SSGとSSRで対応します。
Client Component
Client Component（クライアントコンポーネント）はクライアントサイドでHTMLレンダリングし、ブラウザ上でロジックを実行します。CSRで対応します。
use client ディレクティブ
クライアントコンポーネントを利用するには、use clientディレクティブ の宣言が必要です。
コンポーネント作成
ファイル構成
client/
├── app/
│ ├── components/
│ │ └── ChatForm.tsx
│ ├── login/
│ │ └── page.tsx
│ └── page.tsx
チャットフォーム
app/components/ChatForm.tsxを作成します。
use client ディレクティブ
このコンポーネントは CSR (Client Component) とするため use clientディレクティブを先頭に宣言します。
app/components/ChatForm.tsx
"use client"
コンポーネント定義
ChatForm.tsxで、nafe と入力してコンポーネントを作成します。
- nafe: Next.js の Arrow Function の Export
コンポーネントを作成しました。
app/components/ChatForm.tsx
const ChatForm = () => {
return (
<div>
ChatForm
</div>
);
}
export default ChatForm;
JSX追加
app/page.tsx を修正して、 ChatForm コンポーネントをインポートします。
app/page.tsx
import React from 'react';
import ChatForm from '@/app/components/ChatForm';
export default function Home() {
return (
<div>
<ChatForm />
</div>
);
}
トップページ確認
トップページを確認してHTMLがレンダリングされるか確認してみましょう。
コンポーネント修正
ChatForm コンポーネント* に入力フォームを追加します。
app/page.tsx
"use client"
const ChatForm = () => {
return (
<div>
<textarea className="resize-none w-full h-24 border rounded-md p-2" placeholder="今なにしてる？"></textarea>
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">Send</button>
</div>
);
}
export default ChatForm;
ブラウザで確認
保存すると入力フォームが自動更新されます。
演習
問題1
SPAの特徴は何ですか？
- 複数のWebページで構成される。
- サーバーサイドで主にレンダリングされる。
- Webページ1ファイルで、JavaScriptで実行される。
- 静的HTMLで構築される。
問題2
CSRの特徴に関する正しい記述はどれですか？
- サーバーサイドでHTMLページを生成し、ユーザーリクエストに応じてレスポンスする。
- ビルド時にHTMLページを生成し、静的なコンテンツとして提供する。
- クライアントサイド（ブラウザなど）でJavaScriptを実行し、仮想DOMなどからHTMLページを動的に生成する。
- HTMLをキャッシュしながらリクエストから有効期限が過ぎたら、データを再取得してレンダリングする。
問題3
SSRの特徴に関する正しい記述はどれですか？
- サーバーサイドでHTMLページを生成し、ユーザーリクエストに応じてレスポンスする。
- ビルド時にHTMLページを生成し、静的なコンテンツとして提供する。
- クライアントサイド（ブラウザなど）でJavaScriptを実行し、仮想DOMなどからHTMLページを動的に生成する。
- HTMLをキャッシュしながらリクエストから有効期限が過ぎたら、データを再取得してレンダリングする。
問題4
SSGの特徴に関する正しい記述はどれですか？
- サーバーサイドでHTMLページを生成し、ユーザーリクエストに応じてレスポンスする。
- ビルド時にHTMLページを生成し、静的なコンテンツとして提供する。
- クライアントサイド（ブラウザなど）でJavaScriptを実行し、仮想DOMなどからHTMLページを動的に生成する。
- HTMLをキャッシュしながらリクエストから有効期限が過ぎたら、データを再取得してレンダリングする。
問題5
ISRの特徴に関する正しい記述はどれですか？
- サーバーサイドでHTMLページを生成し、ユーザーリクエストに応じてレスポンスする。
- ビルド時にHTMLページを生成し、静的なコンテンツとして提供する。
- クライアントサイド（ブラウザなど）でJavaScriptを実行し、仮想DOMなどからHTMLページを動的に生成する。
- HTMLをキャッシュしながらリクエストから有効期限が過ぎたら、データを再取得してレンダリングする。
問題6
Next.js の「Server Component」と「Client Component 」に関する記述で正しいものはどれですか？
- 「Server Component」はクライアントサイドでHTMLをレンダリングし、ブラウザ上でロジックを実行する。
- 「Client Component」はサーバーサイドでHTMLをレンダリングし、SSGとSSRに対応する。
- 「Server Component」はサーバーサイドでHTMLをレンダリングし、「Client Component」はクライアントサイドでHTMLをレンダリングする。
- 両方のコンポーネントタイプは、サーバーサイドレンダリングとクライアントサイドレンダリングにおいて同じように機能する。