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 formulario y el elemento realmente se guarda, pero la pantalla no cambia. 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 conserva el navegador es el resultado final. Tu acción cambió los datos subyacentes. Nadie se lo comunicó 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 almacenado en caché para esa ruta y la vuelve a renderizar (en el servidor, con datos actualizados); después, intercambia el nuevo resultado en la página. Sin recarga, sin indicador 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 quieres quedarte en el mismo sitio. Para «guardarlo y después ir a algún lugar», una acción del servidor 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>
    );
}