[Next.js] 에러핸들링, 서버액션( revalidatePath()

에러핸들링

 

error.tsx 파일을 만들어서 해당 파일의 위치와 하위폴더의 에러는 error.tsx가 대신사용된다.

기본적으로 오류는

클라이언트 서버 어떤환경이든 발생할 수 있기때문에 클라이언트 컴포넌트 설정해준다

 

- next.js는 에러발생시 에러컴포넌트에서 js에러타임의 에러객체를props로 전달해준다.

- reset : error가 발생한 컴포넌트 복구하기위해 재렌더링하는 함수 ( 서버컴포넌트 다시 실행 x, 클라이언트 컴포넌트에서 발생한 에러만 복구 가능)

 

'use client';

import { useEffect } from 'react';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  useEffect(() => {
    console.error(error.message);
  }, [error]);

  return (
    <div>
      <h3>오류가 발생했습니다.</h3>
      <button onClick={() => reset()}>다시 시도</button>
    </div>
  );
}

 

서버 컴포넌트 복구할 수 없을떄 강제 새로고침 한다.

 <button onClick={() => window.location.reload()}>
  		다시 시도
	   </button>

 

하지만...........

 

브라우저에 보관해두었던 start, 클라이언트 컴포넌트, 에러가 발생하지 않는 컴포넌트까지 다시 랜더링되기 때문에

refresh 매서드를 사용해준다.

 

'use client';  // 반드시 client component!

import { useRouter } from "next/navigation";
import { startTransition, useEffect } from "react";

export default function Error({ error, reset }: { error: Error, reset: ()=>void }) {
  const router = useRouter();
  
  useEffect(() => {
    console.error(error);
  }, [error]);
  
  return (
    <div>
      <h3>오류가 발생했습니다</h3>
      <button onClick={() => {
        startTransition(() => {
          // 현재 페이지에 필요한 서버 컴포넌트들을 다시 불러올 것을 서버에 요청.
          router.refresh()
          // 에러 상태를 초기화, 컴포넌트들을 리렌더링.
          reset()
        })
      }}>다시 시도</button>
    </div>
  );
}

 

- refresh : 현재 페이지에 필요한 서버 컴포너트를 다시 불러온다

- 왜 reset을 작성해야하나?

  -> 에러상태가 초기화 되는것은 아님! 에러상태를 초기화하고, 컴포넌트를 다시 렌더링 해야한다.

- startTransition

  -> refresh는 비동기적으로 동작하지만, async, await에 영향받지 않는 코드라서 이 안에 작성해줘야한다. router.refresh 메서드가 수행하는 서버컴포넌트들을 다시 불러와 화면 렌더링하고, reset ,  이 작업들이 모두 일괄적으로 동시에 처리되어 에러상태를 일관성있게 복구할 수 있다 

 

 

재검증 

새로운 리뷰 (댓글) 추가되면 하단에 UI로 확인하기 위해서는 추가로 새로고침 눌러줘야하는 상태였다.

 

 

`Revalidate`를 적용해서 새로고침 없이 리뷰 바로 확인해보자

 

"use server";

import { revalidatePath } from "next/cache";

export async function createReviewAction<(formData: FormData) {
  // 데이터 꺼내 쓰기
  const bookId = formData.get("bookId")?.toString();
  const content = formData.get("content")?.toString();
  const author = formData.get("author")?.toString();
  // 예외 처리
  if (!bookId || !content || !author) {
    return;
  }
  // 리뷰 추가 기능 구현
  try {
    // api 경로, fetch 요청의 옵션 객체
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review`, {
        method: "POST",
        body: JSON.stringify({ bookId, content, author }),
      }
    );

    console.log(response.status);
    revalidatePath(`/book/${bookId}`);
  } catch(err) {
    console.error(err);
    return;
  }

 

 

작성하기 버튼 누르면 

CreateReviewAction() 함수에 `revalidate`를 적용한다.

 

revalidatePath함수를 불러와 데이터가 넘어왔을떄, 해당 경로에 대한 페이지를 재생성할수 있게한다.

 

 

주의할점

1. revalidatePath() 함수는 서버측에서만 호출할 수 있는 메서드

2. revalidatePath() 는 인수로 받은 경로에대한 페이지를 모두 재검증하는 함수라서, 페이지에 포함된 캐시들까지도 모두 무효화시킨다. 

 

 

그 캐시에는 캐시옵션 설정을 통해 생성되는 데이터 캐시만 포함된것이 아니라, 페이지 전체를 캐싱하는 풀 라우트 캐시 또한 포함된다. 

 

특히 풀라우트 캐시는 revalidatePath()함수 실행시 무효화 되고, 리뷰추가로 새롭게 생성된 페이지를 풀라우트 캐시에 자동저장 x.

새로고침을 통해 페이지에 재접속하면 서버는 페이지를 새롭게 생성하며, 그때 업데이트된 풀라우트 캐시를 확인가능함.

 

 

 

book/1 경로로 접속하면 

도서정보, 리뷰정보 데이터를 백엔드 서버로부터 불러와 각각 데이터 캐시로 저장한다.

-> 페이지 완성되면 페이지 전체 데이터를 풀라우트 캐시로 저장

 

 

 

 

여기서 revalidatePath() 함수 사용하면 저장되어있던 풀라우트 캐시와 데이터 캐시 모두 무효화, 

데이터 패칭 시 백엔드 서버로부터 불러와 데이터 캐시 갱신함

 

-> 새롭게 만든페이지를 브라우저에게 응답 ->이때 풀라우트 캐시는 갱신되지 xxx

 

같은 book/1경로로 접속요청 들어오면 실시간으로 페이지 재생성해서 풀라우트 캐시에 저장

 

이렇게 동작하는 이유는 최시느이 데이터를 보장하기 위해서~~~

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

https://velog.io/@jpy1030/TIL-241113Next.js-Server-Action-Day16