רענון הדף

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 32 מתוך 47.

אתה חי עם שקר כבר שני שיעורים. שלח את הטופס, והפריט אכן נשמר, אבל המסך לא משתנה. טען מחדש את הדף, והנה הוא.

הסיבה היא בדיוק מה שהופך את רכיבי השרת למהירים. הדף קרא את הנתונים שלו פעם אחת, בשרת, ומה שהדפדפן מחזיק הוא התוצאה המוגמרת. הפעולה שלך שינתה את הנתונים שמאחוריו. אף אחד לא הודיע לדף.

התיקון הוא שורה אחת, בסוף הפעולה:

'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' עבור דף המשימות. אם תפנה אותו לנתיב שגוי, לא יקרה דבר שנראה לעין: הבאג הקלאסי של "הפעולה שלי עובדת אבל הרשימה לא מעודכנת".

לפעמים לא רוצים להישאר במקום בכלל. עבור "לשמור ואז לעבור למקום אחר", פעולת שרת יכולה להסתיים ב־redirect():

import { redirect } from 'next/navigation';

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

אותו import שהיית משתמש בו בדף. השתמש ב-revalidatePath כשהמשתמש נשאר בדף, וב-redirect כשהוא עובר הלאה.

אתגר

קל

addTask שומרת כראוי, אבל הרשימה שעל המסך אף פעם לא מתעדכנת. תקן את זה.

ב־app/actions.js, ייבא את revalidatePath מתוך 'next/cache'.
קרא לה עם נתיב דף הבית, '/', אחרי שמירת המשימה.

אין צורך לשנות דבר ב־app/page.jsx: זהו תיקון שכולל ייבוא אחד ושורה אחת.

נסו בעצמכם

import './globals.css';

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

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