TIL 52. 2024-03-13

SSR을 사용하는 과정에서 에러 발생 ㅠㅠ

const SSRPage = async () => {
  const response = await fetch("http://localhost:3000/api/todos", {
    cache: "no-cache",
  });
  const { todos } = await response.json();

  return (
    <div>
      <ul>
        {todos.map((item: Todo) => (
          <li key={item.id}>
            <p>{item.title}</p>
            <p>{item.content}</p>
            <p>{item.isDone}</p>
          </li>
        ))}
      </ul>

      <Link href={"/report"}>할일정보통계보러가기</Link>
    </div>
  );
};

현재 이 부분에서500 서버 에러가 발생하였고
err: Error occurred prerendering page "/todos-ssr". Read more: https://nextjs.org/docs/messages/prerender-error 구글링을 통해 알아본 결과는 해당 페이지를 정적 페이지로 빌드하려고 하니 문제가 생기는 것 같습니다. 클라이언트 컴포넌트는 해당 에러에서 발견되지 않았고, 동적 라우팅된 페이지 역시 기본적으로 동적 페이지로 빌드하다 보니 별도로 설정되어 있지 않은 기본적인 서버 컴포넌트들이 에러가 되는 것 같습니다.
해결방법은 정적 페이지를 동적 페이지로 변경: export const dynamic = "force-dynamic";

export dynamic

ex)
export const dynamic = 'auto'
종류: 'auto' | 'force-dynamic' | 'error' | 'force-static'

• "auto": 페이지가 처음 요청될 때, Next.js가 페이지를 정적으로 생성할지 또는 서버에서 동적으로 렌더링할지를 결정
• 'force-dynamic': 페이지를 항상 서버에서 동적으로 렌더링하도록 강제합니다. 즉, 매 요청마다 서버에서 페이지를 렌더링합니다.
• force-static': 페이지를 항상 정적으로 생성하도록 강제합니다. 즉, 페이지는 요청 시마다 정적으로 생성됩니다.
• 'error': 페이지를 정적으로 생성할 수 없거나 서버에서 동적으로 렌더링할 수 없다는 오류를 발생