Actualización de la página

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 32 de 47.

Has estado viviendo con una mentira durante dos lecciones. Envía el form y el elemento realmente se guarda, pero la pantalla no se mueve. Recarga la página y ahí está.

La razón es exactamente lo que hace que los Server Components sean rápidos. La página leyó sus datos una vez, en el servidor, y lo que mantiene el navegador es el resultado final. Tu action cambió los datos que hay detrás. Nadie se lo dijo a la página.

La solución es una línea, al final de la action:

'use server';

import { revalidatePath } from 'next/cache';
import { saveTask } from '../lib/db';

export async function addTask(formData) {
    saveTask(formData.get('title'));
    revalidatePath('/');
}

revalidatePath('/') descarta lo que Next.js ha guardado en caché para esa ruta y lo renderiza de nuevo (en el servidor, con datos frescos), y después intercambia el nuevo resultado en la página. Sin recargas, sin indicadores de carga, sin estado.

El argumento es la ruta a volver a renderizar, escrita de la misma forma en que aparece en la URL: '/' para la página principal, '/tasks' para una página de tareas. Si apunta a la ruta incorrecta no sucederá nada visible: el clásico error de "mi acción funciona pero la lista está desactualizada".

A veces no querrás quedarte en la misma página. Para "guardarlo, después ir a otro sitio", una Server Action puede terminar con redirect():

import { redirect } from 'next/navigation';

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

Misma importación que usarías en una página. Recurre a revalidatePath cuando el usuario se quede en la página, y a redirect cuando pase a otra.

Desafío

Fácil

addTask se guarda correctamente, pero la lista en pantalla nunca se actualiza. Corrígelo.

En app/actions.js, importa revalidatePath desde 'next/cache'.
Llamalo con la ruta de inicio, '/', después de que la tarea se haya guardado.

Nada en app/page.jsx necesita cambiar: esta es una solución de una sola importación y una sola línea.

Pruébalo tú mismo

import './globals.css';

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

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