データの変更と再検証
Server Actionsでサーバー上のデータを変更し、キャッシュデータを自動的に再検証してUIを更新する方法を学びます
「データの変更と再検証」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはNext.js 15 Fullstack (App Router + Server Actions)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
What is Data Mutation?
In web development, data mutation means changing data on the server. This includes creating new data, updating existing records, or deleting data.
- Create: Adding a new user.
- Update: Changing a user's email.
- Delete: Removing an item from a list.
Most interactive web applications rely heavily on data mutation to provide dynamic experiences.
Server Actions for Mutations
Next.js 15's Server Actions are perfect for handling data mutations. They allow you to run server-side code directly from your React components, making it simple to update your backend.
Instead of creating API routes for every data change, you can define these actions right where they're needed, keeping your code organized and efficient.
The Cache Challenge
When you mutate data on the server, the client-side UI often doesn't automatically reflect these changes. This is because Next.js (and browsers) aggressively cache data to improve performance.
If the UI still shows old, cached data after a server update, users see outdated information. We need a way to tell Next.js: "Hey, this data has changed, please get the fresh version!"
Revalidating with `revalidatePath`
To ensure your UI shows the latest data, Next.js provides caching utilities. One common method is revalidatePath.
After a Server Action changes data, you can call revalidatePath('/') to tell Next.js to invalidate the cache for the specified path (e.g., the home page) and refetch its data on the next request.
Demo: Update & Revalidate Path
This example shows a simple form that adds a task using a Server Action. After the task is added, revalidatePath('/') ensures that any data displayed on the root page (like a list of tasks) is refreshed.
import { revalidatePath } from 'next/cache';
async function addTask(formData) {
'use server';
const task = formData.get('task');
// Simulate saving to a database
console.log('Adding task:', task);
await new Promise(r => setTimeout(r, 500));
// Revalidate the home page to show new tasks
revalidatePath('/');
}
export default function Page() {
return (
<div>
<h1>My Task List</h1>
<form action={addTask}>
<input type="text" name="task" placeholder="New task" required />
<button type="submit">Add Task</button>
</form>
<p>Task list will refresh after adding!</p>
</div>
);
}Granular Control with `revalidateTag`
Sometimes you need more granular control over caching than just revalidating an entire path. This is where revalidateTag comes in.
When fetching data, you can assign a custom tag using the fetch API. Then, after a mutation, you can use revalidateTag('my-data-tag') to invalidate only the data associated with that specific tag.
When to use `revalidateTag`
Use revalidateTag when:
- Data is fetched from an external API using
fetch. - The data is shared across multiple pages or components.
- You want to update specific data without re-rendering entire pages.
It's ideal for scenarios like updating a single user's profile data that might appear on various pages.
Post-Mutation Redirection
After a successful data mutation, you often want to redirect the user to another page (e.g., a success page or the updated list page). Next.js provides a redirect helper for this.
You can use redirect('/dashboard') inside your Server Action to send the user to the dashboard after a form submission.
Full Flow: Mutate, Revalidate, Redirect
This example combines all concepts: a form submission triggers a Server Action, which mutates data, revalidates the relevant path, and then redirects the user to a confirmation page.
import { revalidatePath, redirect } from 'next/cache';
async function createPost(formData) {
'use server';
const title = formData.get('title');
const content = formData.get('content');
// Simulate saving new post to a DB
console.log('New Post:', { title, content });
await new Promise(r => setTimeout(r, 700));
revalidatePath('/posts'); // Revalidate the posts list page
redirect('/posts/success'); // Redirect to a success page
}
export default function NewPostPage() {
return (
<div>
<h1>Create New Post</h1>
<form action={createPost}>
<input type="text" name="title" placeholder="Title" required />
<textarea name="content" placeholder="Content" required />
<button type="submit">Publish Post</button>
</form>
</div>
);
}Quick Check on Revalidation
A Server Action successfully creates a new product and you want to update the product listing page (/products) and also ensure any cached data specifically tagged 'featured-products' is refreshed. Which revalidation methods should you use?
Recap: Mutate & Revalidate
Great job! You've learned how Server Actions are key to mutating data on the server. You also mastered how to keep your UI fresh:
- Use Server Actions for creating, updating, or deleting data.
- Employ
revalidatePathto refresh data for specific routes. - Utilize
revalidateTagfor fine-grained cache invalidation of taggedfetchrequests. - Use
redirectto guide users after a successful action.
This powerful combination ensures your Next.js applications are always showing accurate, up-to-date information.
よくある質問
「データの変更と再検証」レッスンは無料ですか？
はい。「データの変更と再検証」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。
「データの変更と再検証」で何を学びますか？
Server Actionsでサーバー上のデータを変更し、キャッシュデータを自動的に再検証してUIを更新する方法を学びます ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「データの変更と再検証」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このNext.js 15 Fullstack (App Router + Server Actions)レッスンでコードを書いて実行できますか？
はい。すべてのNext.js 15 Fullstack (App Router + Server Actions)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。