Atualizando a Página

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 32 de 47.

Você viveu uma mentira por duas lições. envie o formulário, e o item realmente é salvo, mas a tela não se move. Recarregue a página e lá está ele.

A razão é exatamente o que torna os Server Components rápidos. A página leu seus dados uma vez, no servidor, e o que o navegador possui é o resultado final. Sua ação alterou os dados por trás dela. Ninguém avisou a página.

A correção é de apenas uma linha, ao final da 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 o que o Next.js armazenou em cache para essa rota e a renderiza novamente (no servidor, com dados atualizados), depois substitui o novo resultado na página. Sem recarregamento, sem spinner, sem estado.

O argumento é a rota a ser renderizada novamente, escrita da forma como aparece na URL: '/' para a página inicial, '/tasks' para uma página de tarefas. Aponte para o caminho errado e nada visível acontecerá: o clássico erro "minha action funciona, mas a lista está desatualizada".

Às vezes você simplesmente não quer permanecer onde está. Para o caso "salve isto, depois vá para outro lugar", uma Server Action pode terminar com redirect():

import { redirect } from 'next/navigation';

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

A mesma importação que você usaria em uma página. Use revalidatePath quando o usuário permanecer na página, e redirect quando ele for para outra.

Desafio

Fácil

O addTask salva corretamente, mas a lista na tela nunca é atualizada. Corrija isso.

Em app/actions.js, importe revalidatePath de 'next/cache'.
Chame-o com a rota principal, '/', after a tarefa ser salva.

Nada em app/page.jsx precisa mudar: esta é uma correção de uma linha e uma importação.

Experimente você mesmo

import './globals.css';

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

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