오늘도 간단한 넥스트 활용에 대해 이야기를 해보겠습니다.
오늘은 개인 과제의 어떤 점을 하였고 어디서 힘들었는지 정리하는 시간입니다.
진행도
현재 진행도는 크게 4가지 과정으로 나눌 수 있습니다.
1. SSG 렌더링을 활용한 페이지 제작
2. ISR 렌더링을 활용한 페이지 제작
3. SSR 렌더링을 활용한 페이지 제작
4. CSR 렌더링을 활용한 페이지 제작
이러한 4가지 과정에서 주요 목표는 Next.js의 fetch 기능을 잘 활용하고, API 응답을 캐싱하는 과정을 통해 프레임워크에 익숙해지는 것이었습니다. 렌더링 방식에 따라 데이터를 효율적으로 관리하고 성능을 개선하는 과정을 경험하고 있습니다.
SSG 렌더링
SSG 렌더링을 적용한 아이템 목록 페이지는 빌드 타임에 데이터를 미리 렌더링한 후, 정적인 페이지를 제공하는 방식입니다.
• 버전을 받아오는 API를 통해 데이터를 받아와 렌더링하였습니다.
• getStaticProps를 사용해 데이터를 미리 패칭하고, 결과를 캐싱했습니다.
• 패칭 로직은 utils 파일로 분리해 로직과 UI를 분리하여 유지보수를 쉽게 했습니다.
➡️ 주요 포인트:
• SSG는 데이터가 변경될 일이 드물거나, 빠른 로딩이 중요한 경우에 적합합니다.
ISR 렌더링
ISR 렌더링을 적용한 챔피언 목록 페이지는 SSG와 유사했지만, revalidate 값을 추가해 데이터를 일정 주기로 갱신했습니다.
• getStaticProps에서 revalidate 옵션을 사용해 갱신 주기를 설정했습니다.
• 챔피언 목록에서 검색 기능을 추가했는데, 일부 컴포넌트는 use client로 명시해야 클라이언트에서 동적으로 렌더링이 가능했습니다.
➡️ 어려웠던 점:
• 정적으로 생성된 페이지에서 클라이언트 상태를 동기화하는 과정이 헷갈렸습니다.
• 클라이언트 상태와 서버 상태를 동기화하는 로직에서 동기/비동기 처리가 까다로웠습니다.
SSR 렌더링
SSR 렌더링은 챔피언 상세 페이지에서 적용했습니다.
• 챔피언 목록 페이지에서 카드 클릭 시 params 값을 통해 동적 라우팅을 수행했습니다.
• getServerSideProps에서 데이터를 fetch하여 클라이언트에 완성된 HTML을 전달했습니다.
➡️ 어려웠던 점:
• params 값을 넘기고 유틸에서 값을 가공할 때 발생하는 타입 문제가 어려웠습니다.
• 서버에서 생성된 데이터를 클라이언트에서 정확히 받기 위해 타입 정의를 명확히 해야 했습니다.
CSR 렌더링
CSR 렌더링은 챔피언 로테이션 페이지에서 적용했습니다.
• use client로 명시한 후 데이터를 클라이언트에서 fetch했습니다.
• 상태 관리는 커스텀 훅을 만들어 일반 React 프로젝트와 동일하게 처리했습니다.
➡️ 주요 포인트:
• CSR은 사용자 입력이나 상태 변화가 잦고, 실시간 반응이 필요한 경우에 적합합니다.
• 클라이언트에서 서버상태를 효율적으로 관리하기 위해 TanStackQuery를 사용할 수도 있습니다.
🤔 고민한 점
- API 캐싱 전략
- SSG와 ISR에서는 데이터를 캐싱할 수 있지만, CSR에서는 fetch 결과를 캐싱하기 어렵습니다.
- 서버 액션에서 Next.js 서버의 캐싱된 데이터를 받아올 수 없기 때문에 Route Handler를 통해 API 호출 횟수를 줄이는 방향을 고민하고 있습니다.
- 렌더링 방식에 따른 상태 관리
- SSR에서 데이터를 가져온 후 클라이언트에서 추가적으로 상태를 관리해야 하는 경우가 발생합니다.
- 전역 상태 관리를 위해 zustand + TanStack Query 조합을 고려하고 있습니다.
🏁 마치며
아직 초반이라 시행착오가 많지만, 점차 이해도가 높아지고 있습니다.
내일은 ISR 렌더링에서 클라이언트 상태를 추가하고 검색 로직을 완성하는 작업에 집중할 예정입니다.
또한 Route Handler를 통해 API 통신을 줄이고 상태 관리 방식을 정리해 볼 생각입니다.
