ページの更新

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 32/47。

ここ2つのレッスンでは、あえて伏せられていた事実がありました。フォームを送信（submit）すると、アイテムは実際に保存（save）されますが、画面は移動しません。ページをリロードすると、そこに表示されます。

その理由はまさにServer Componentsを高速にしている要因そのものです。ページはサーバー上でデータを1回だけ読み込み、ブラウザが保持しているのはその結果の完成形です。`action` によって裏側のデータが変更されましたが、そのことをページには誰も伝えていません。

修正はアクションの最後にある1行だけです：

'use server';

import { revalidatePath } from 'next/cache';
import { saveTask } from '../lib/db';

export async function addTask(formData) {
    saveTask(formData.get('title'));
    revalidatePath('/');
}

revalidatePath('/') は、Next.jsがそのルートに対してキャッシュした内容を破棄して、（サーバー上で最新のデータを用いて）再レンダリングを行い、新しい結果をページに反映させます。リロードも、スピナーも、ステートも不要です。

引数は、URLに表示される形式で記述された再レンダリングするルートです。ホームページの場合は '/'、タスクページの場合は '/tasks' になります。間違ったパスを指定すると何も表示されず、典型的な「action は動作するが一覧が古いまま」というバグが発生します。

その場にとどまりたくない場合もあります。「保存してからどこかへ移動する」といった処理では、Server Action は redirect() で終了できます：

import { redirect } from 'next/navigation';

export async function createPost(formData) {
    const id = savePost(formData.get('title'));
    redirect(`/posts/${id}`);
}

ページで使用するのと同じインポートです。ユーザーがページにとどまる場合は revalidatePath を使用し、別のページへ移動する場合は redirect を使用します。

チャレンジ

簡単

addTask は正常に保存されますが、画面上のリストが更新されません。修正してください。

app/actions.js で、'next/cache' から revalidatePath を import します。
task が保存された after に、ホームルートである '/' を指定して呼び出します。

app/page.jsx 内のコードを変更する必要はありません。import を1つ追加し、1行修正するだけで完了します。

自分で試してみよう

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}