페이지 새로고침하기

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 32번째.

지난 두 레슨 동안 거짓과 함께 지내왔습니다. 폼을 제출하면 항목이 실제로 저장되지만, 화면은 이동하지 않습니다. 페이지를 새로고침하면 거기에 나타납니다.

그 이유는 정확히 Server Components가 빠른 이유와 같습니다. 페이지는 데이터를 서버에서 한 번 읽었으며, 브라우저가 보유하고 있는 것은 완료된 결과입니다. 당신의 `action`이 그 이면에 있는 데이터를 변경했습니다. 하지만 아무도 페이지에 이를 알려주지 않았습니다.

수정 방법은 action의 끝에 한 줄을 추가하는 것입니다:

'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가 해당 경로에 대해 캐시한 내용을 버리고 (서버에서 최신 데이터로) 다시 렌더링한 다음, 새로운 결과를 페이지에 교체해 넣습니다. 새로고침도, 스피너도, 상태 변경도 없습니다.

전달인자는 URL에 표시되는 형태 그대로 작성된 다시 렌더링할 경로입니다. 홈 페이지의 경우 '/', 작업 페이지의 경우 '/tasks'입니다. 잘못된 경로를 지정하면 눈에 보이는 아무런 변화도 일어나지 않습니다. 이는 클래식한 "내 액션은 작동하지만 목록이 오래된 상태로 남아있는" 버그의 원인이 됩니다.

때로는 현재 페이지에 그대로 머물고 싶지 않을 때가 있습니다. "저장하고 다른 곳으로 이동"하는 작업의 경우, Server Action은 redirect()로 마무리할 수 있습니다:

import { redirect } from 'next/navigation';

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

페이지에서 사용하는 동일한 import입니다. 사용자가 페이지에 머무르는 경우에는 revalidatePath를 사용하고, 다른 페이지로 이동하는 경우에는 redirect를 사용하세요.

챌린지

쉬움

addTask가 올바르게 저장하지만 화면의 목록이 업데이트되지 않습니다. 이를 수정하세요.

app/actions.js에서 'next/cache'로부터 revalidatePath를 import하세요.
task가 저장된 after 홈 라우트인 '/'를 사용해 이를 호출하세요.

app/page.jsx에서는 아무것도 변경할 필요가 없습니다. 이는 import 하나와 코드 한 줄로 해결하는 수정 작업입니다.

직접 해보기

import './globals.css';

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

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