NextJs - 새로고침 시 동적 라우팅 query 에러

• board/{{board_id}} 로 해당 board의 메세지들을 불러워야 하는데, 새로고침 시 router.query에 데이터가 넘어가지 않는다.

const reqUrl = /messages/${query.id};
// reqUrl = /messages/undefined

→ reqUrl = /messages/undefined가 됨.
→ getServerSideProps()를 사용하여 해결한다.

getServerSideProps()

• SSR을 사용하여 페이지 요청 시마다 서버로 데이터 요청을 보낼 수 있다.

• 요청 url이 /board/{id} 인 경우

export default function Page({id}:any) { //-> 새로고침 시에도 id가 undefined가 되지 않음
	...
}

export async function getServerSideProps(context:any) {
  return { props: { id: context.params.id } };
}