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>
    );
}