getServerSideProps 새로고침

Next.js 에서 getServerSideProps 로 데이터를 가져온 뒤, 하위 컴포넌트에 props 로 데이터를 넘겨줬다.

그 넘겨준 데이터를 바탕으로 post api 를 호출했을 때, 결괏값을 화면에 보여주기 위해서는 새로 렌더링을 시켜줘야했다.

post api 를 호출하고 결괏값을 받는 행위는 클라이언트쪽에서 처리를 해야했기 때문에 클라이언트에서 새로 데이터를 가져오는 행위를 하면 클라이언트에서 가져온 데이터 포맷이 getServerSideProps 로 가져온 데이터포맷과 달라 새로 코드를 짜야한다고 생각했다.

그래서 화면만 refresh 하면 되겠다는 생각을 했고 찾아봤다.

const router = useRouter();
  
const refreshData = () => {
    router.replace(router.asPath);
}

위처럼 nextjs useRouter 를 이용해 router의 replace 경로를 router.asPath(router 의 현재경로) 로 바꾸는 함수를 만들어 post api 하단에 구현했다.

문제해결

생각이 너무 짧았다는 것을 알았다.

React 로 구현했을 때는 하지 않았을 생각을 왜 Next 에서는 했는지 모르겠다.

getServerSideProps 로 가져온 데이터를 화면에 그대로 뿌리는게 아니라, useState 의 초기변수에 getServerSideProps 결괏값을 넣어 초기화 시킨 뒤,

post api 로 가져온 결괏값을 SetState 해줌으로써 State 값이 업데이트된 컴포넌트가 렌더링 되는, 아주 당연한 결과를 얻을 수 있었다.

전체 화면 깜박임도 없어져서 더 좋아졌다.