Sayfayı Yenileme

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası. Ders 32 / 47.

İki derstir bir yalanla yaşıyorsunuz. Formu gönderdiğinizde öge gerçekten kaydediliyor, ancak ekran kıpırdamıyor. Sayfayı yeniden yükleyin ve işte orada.

Nedeni, Server Components'i hızlı yapan şeyin ta kendisidir. Sayfa verilerini sunucuda bir kez okudu ve tarayıcının elinde olan şey tamamlanmış sonuçtur. Eyleminiz arkasındaki verileri değiştirdi. Sayfaya kimse haber vermedi.

Düzeltme, action'ın sonunda tek satırdır:

'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’in bu rota için önbelleğe aldığı verileri atar ve rotayı yeniden oluşturur (sunucuda, güncel verilerle), ardından yeni sonucu sayfaya aktarır. Yeniden yükleme yok, yükleme göstergesi yok, durum yok.

Bağımsız değişken, URL'de göründüğü şekilde yazılan yeniden işlenecek rota'dır: ana sayfa için '/', görevler sayfası için '/tasks'. Yanlış yolu belirtirsen görünür hiçbir şey olmaz: klasik "eylemim çalışıyor ama liste güncel değil" hatası.

Bazen hiç yerinde kalmak istemezsin. “Kaydet, sonra başka bir yere git” durumu için bir Server Action, redirect() ile sona erebilir:

import { redirect } from 'next/navigation';

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

Bir sayfada kullanacağınız içe aktarmanın aynısı. Kullanıcı sayfada kalıyorsa revalidatePath kullanın; başka bir sayfaya geçiyorsa redirect kullanın.

Görev

Kolay

addTask doğru şekilde kaydediyor, ancak ekrandaki liste hiç güncellenmiyor. Bunu düzeltin.

app/actions.js içinde revalidatePath işlevini 'next/cache' modülünden içe aktarın.
Görev kaydedildikten sonra, ana rotayla birlikte '/' çağrısını yapın.

app/page.jsx içinde hiçbir şeyi değiştirmeniz gerekmez: bu, tek içe aktarma ve tek satırlık bir düzeltmedir.

Kendin dene

import './globals.css';

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

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