이 글은 FECONF 2023의 "몇 천 페이지의 유저 가이드를 새로 만들며" 발표를 제가 직접 블로그에 정리한 글입니다. 서버 사이드 렌더링은 빠르게 화면을 사용자에게 제공해준다는 점에서 매력적이지만, 예상치 못한 문제들이 발생하기도 합니다.

Next.js(App Router)와 Contentful (Headless CMS) 조합을 통해 몇 천 페이지가 넘는 유저 가이드를 최적화하고, 최적화 과정에서 일어난 다양한 문제들을 어떻게 해결했는지 소개합니다.

개인적으로, 서버사이드 렌더링 과정에서 발생한 문제를 React 렌더링 과정부터 살펴보면서 react-dom 소스 코드에서 문제 원인을 찾고, 소문자 속성(hidden="until-found")을 대문자 속성(HIDDEN="until-found")으로 변경하여 창의적으로 문제를 해결하는 과정이 인상적이었습니다.

특히나 Next.js의 App Router가 새로운 스펙이다보니, 트러블슈팅에 관한 내용이 풍부해서 미연에 이슈를 방지하는 데 도움이 되실 것 같습니다.

https://harimkim.netlify.app/articles/3.%20Resource/%EC%BB%A8%ED%8D%BC%EB%9F%B0%EC%8A%A4/FECONF%202023/%EB%AA%87%20%EC%B2%9C%20%ED%8E%98%EC%9D%B4%EC%A7%80%EC%9D%98%20%EC%9C%A0%EC%A0%80%20%EA%B0%80%EC%9D%B4%EB%93%9C%EB%A5%BC%20%EC%83%88%EB%A1%9C%20%EB%A7%8C%EB%93%A4%EB%A9%B0