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.

Neden, tam olarak Server Components'ı hızlı kılan şeydir. Sayfa verilerini sunucuda bir kez okudu ve tarayıcının elinde tuttuğu şey tamamlanmış sonuçtur. Gerçekleştirdiğiniz action, bunun arkasındaki veriyi değiştirdi. Sayfaya bunu kimse söylemedi.

Düzeltme tek bir satırdır, action'ın sonunda yer alı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 o rota için önbelleğe aldığı her şeyi atar ve sayfayı yeniden işler (sunucuda, taze verilerle), ardından yeni sonucu sayfaya aktarır. Yeniden yükleme yok, yükleme simgesi (spinner) yok, durum (state) yok.

Argüman, URL'de göründüğü şekilde yazılan yeniden render edilecek rotadır: ana sayfa için '/', bir tasks sayfası için '/tasks'. Yanlış yola işaret ettiğinizde görünürde hiçbir şey olmaz: klasik "action çalışıyor ama liste güncel değil" hatası.

Bazen olduğunuz yerde kalmak istemezsiniz. "Kaydet, sonra bir yere git" durumu için bir Server Action redirect() ile sonlanabilir:

import { redirect } from 'next/navigation';

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

Bir sayfada kullanacağınız aynı import. Kullanıcı sayfada kaldığında revalidatePath, başka bir yere geçtiğinde ise redirect kullanın.

Görev

Kolay

addTask doğru şekilde kaydediyor, ancak ekrandaki liste hiçbir zaman güncellenmiyor. Düzeltin.

app/actions.js içinde, 'next/cache' konumundan revalidatePath fonksiyonunu import edin.
Görev kaydedildikten sonra, bunu ana sayfa rotası olan '/' ile çağırın.

app/page.jsx içindeki hiçbir şeyin değişmesi gerekmez: bu tek import'luk, 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>
    );
}