예시 답변 1
약 88초
SSR 렌더링 전략·하이드레이션 최적화·데이터 페칭 패턴으로 Next.js SSR 경험 결
Next.js를 활용한 SSR 개발에서 가장 먼저 이해한 것은 렌더링 전략의 선택 기준이었습니다. SSR·SSG·ISR 중 어느 것을 쓸지는 페이지의 데이터 변경 주기와 SEO 요건에 따라 달랐고, 잘못 선택하면 불필요한 서버 부하나 캐시 문제가 생겼습니다.
하이드레이션 불일치 문제도 경험했습니다. 서버에서 렌더링된 HTML과 클라이언트에서 생성된 DOM이 다를 때 콘솔에 경고가 발생했는데, 서버와 클라이언트 모두에서 일관된 데이터를 사용하도록 초기 상태 전달 방식을 수정해 해결했습니다.
데이터 페칭 패턴도 중요했습니다. `getServerSideProps`와 클라이언트 사이드 페칭을 언제 나눠 쓸지를 판단하는 것이 성능에 영향을 줬습니다. 초기 렌더링에 꼭 필요한 데이터는 서버에서, 인터랙션 후 필요한 데이터는 클라이언트에서 가져오는 분리 전략이 로딩 속도를 개선했습니다.
이 결의 특징
렌더링 전략을 데이터 변경 주기와 SEO 요건에 따라 선택한 구체 기준이 드러납니다.
이 결이 통하는 자리
초기 렌더링 데이터는 서버에서, 인터랙션 데이터는 클라이언트에서 가져오는 분리 전략이 답에 담겨 있을 때 면접관의 신뢰가 쌓이는 자리를 자주 봅니다.