تحديث الصفحة

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 32 من 47.

لقد كنت تعيش مع كذبة لدرسين متتاليين. قم بإرسال الـ form، وسيتم حفظ العنصر بالفعل، ولكن الشاشة لا تتحرك. أعد تحميل الصفحة وستجده هناك.

السبب هو بالضبط ما يجعل مكونات خادم (Server Components) سريعة. قرأت الصفحة بياناتها مرة واحدة، على الخادم، وما يحتفظ به المتصفح هو النتيجة النهائية. لقد غير الـ `action` الخاص بك البيانات المخفية وراءها. لم يخبر أحد الصفحة بذلك.

الإصلاح يتكون من سطر واحد في نهاية الـ `action`:

'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 بحفظه مؤقتًا (cache) لذك المسار ويقوم بتقديمه مجددًا (على الـ server، مع بيانات حديثة)، ثم يستبدل النتيجة الجديدة في الصفحة. بدون إعادة تحميل، بدون مؤشر تحميل، وبدون حالة (state).

الوسيط هو المسار المراد إعادة عرضه (route to re-render)، مكتوبًا بالطريقة التي يظهر بها في عنوان 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، استورد revalidatePath من 'next/cache'.
قم باستدعائها مع المسار الرئيسي، '/'، بعد حفظ الـ task.

لا يوجد شيء يتطلب التغيير في 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>
    );
}