Next.js i18n 다국어 시 getServerSideProps 사용 문제

Question

안녕하세요 Next.js를 통해 프로젝트를 진행하고있는데 궁금증이 생겨서 질문남깁니다 !

i18n 라이브러리를 통해 다국어를 진행하고있는데 getStaticProps를 쓰고있습니다..

getStaticProps는 getServerSideProps랑 같이 사용 못하는 것으로 알고있는데 페이지마다 다국어가 들어가는 상황에서 get api 호출을 어떻게 진행해야할까요? (거의 모든 호출이 query나 param이 있는 동적인 데이터입니다…)

1. CSR형태로 페이지내에서 진행
2. 다국어또한 getServerSideProps로 진행
3. getStaticPath로 ISR형태로 revalidate를 짧게 진행해서 getStaticPaths가 없이 fallback “true”, “blocking” 형태로 진행

또 추가로
4. fallback “true”와 “blocking” 때의 각각의 장단점이 궁금합니다….! (똑같아보여서…😭)

질문이 길지만 너무 감사합니다😂

손정현 · Accepted Answer

안녕하세요!

프로젝트의 구성이 정확히 그려지지 않아서 올바른 답변인지는 모르겠지만 서버사이드에서 i18n이 적용된 값을 쓰고 싶으신거면 이미 next-i18next 라는 라이브러리가 있어요. 한번 확인해보세요!
- https://github.com/i18next/next-i18next

getStaticPaths에서 fallback은 깃허브 쪽 한번 참고해보시면 좋을 것 같아요. 
- https://github.com/vercel/next.js/discussions/20093

요약하자면 fallback: blocking의 경우 생성되지 않은 페이지 경로로 요청이 들어올 경우, 첫 요청에서 서버 렌더된 페이지를 생성하고 이후 요청은 캐싱된 값을 제공해줍니다. fallback: true의 경우는 blocking과 비슷하지만 첫 요청이 들어오고 서버에서 렌더가되기 전에 로딩 상태를 담고 있는 정적 파일을 내려줍니다. 이후 서버 로직 처리가 되고 렌더가 되면 다음 요청부터는 캐싱된 페이지를 제공해준다고 하네요 :)