[이슈해결노트] next.js ssr > ssg/csr 구조 변경에 따른 기간한정 오류 임시처리 및 구조변경 정리

1. 문제상황

⇒ 리스트 개편을 하면서 oroundCommonStore이 ssr이나 ssg로 불리지 않고 MainTemplete/ _app.tsx 내에서 useOroundInfo() 훅으로 불리며, csr로 변경되었다.

기간한정은 그때그때, 서버시간을 받아와야하는데 처음 랜더링 하거나 페이지 전환으로 서버 시간이 저장 된 그 값이 갱신되지 않아서 생기는 문제였다.

2. 임시 처리

• product 페이지의 구조는 ssr로 되어있어서 페이지를 전환하거나 리렌더링을 했을 때 값을 호출 할 수 있다.
• product 페이지의 기간한정 데이터 계산을 위한 서버 시간 값을 ssr에서 만들어서 props로 전달해주기로 했다.
• 리스트 내에 있는 값은 new Date()로만 today의 값을 만들고, 기간한정 내용이 크게 보이는 상세페이지에서의 내용은 ssr내 서버시간과 gap을 계산해서 state 내에 저장해 준 뒤에 계산했다.

3. 추후 과정

(1) 시간을 UTC를 받아오는 라이브러리를 사용한 뒤, utc와 local 시간 차를 계산해 local 시간을 대체해준다.

(2) 상세 페이지에 seo를 위해 필요한 정보인 summery와 이미지를 제외하고는 모두 csr로 대체한다.
(useSWR 사용)