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': 페이지를 정적으로 생성할 수 없거나 서버에서 동적으로 렌더링할 수 없다는 오류를 발생