Nuxt.js 주니어 성능 최적화 기술면접

SSR은 서버에서 HTML을 완성해서 보내기 때문에 초기 로딩 속도가 빠르고 SEO에 유리합니다. 반면 CSR은 JavaScript를 다운로드하고 실행한 후 렌더링하므로 초기 로딩은 느리지만 이후 페이지 전환이 빠릅니다. SSR은 콘텐츠 중심 페이지나 랜딩 페이지에 적합하고, CSR은 대시보드나 관리자 페이지처럼 인터랙션이 많은 경우에 유리합니다. Nuxt.js에서는 페이지별로 ssr 옵션을 설정하여 하이브리드 렌더링을 구현할 수 있습니다.

먼저 @nuxt/image 모듈을 사용하여 자동으로 이미지를 최적화하고 반응형 이미지를 제공할 수 있습니다. lazy loading을 적용하여 뷰포트에 보이는 이미지만 먼저 로드하고, loading='lazy' 속성을 활용합니다. WebP나 AVIF 같은 최신 이미지 포맷을 사용하여 파일 크기를 줄이고, 적절한 크기로 리사이징하여 제공합니다. 또한 중요한 above-the-fold 이미지는 preload를 적용하고, 나머지는 지연 로딩하는 전략을 사용합니다.

먼저 nuxt.config.ts에서 build.analyze 옵션을 true로 설정하거나 webpack-bundle-analyzer를 사용하여 번들 구성을 시각화합니다. 큰 라이브러리는 동적 import를 사용해 코드 스플리팅을 적용하고, 필요한 시점에만 로드되도록 합니다. 사용하지 않는 코드는 제거하고, lodash 같은 라이브러리는 필요한 함수만 import하여 트리 쉐이킹이 잘 작동하도록 합니다. 또한 moment.js 대신 day.js처럼 가벼운 대안을 사용하고, 외부 라이브러리를 CDN으로 분리하는 것도 고려할 수 있습니다.

useFetch나 useAsyncData의 key 옵션을 활용하여 동일한 요청을 자동으로 중복 제거할 수 있습니다. 이 composable들은 같은 key를 가진 요청을 캐싱하여 재사용합니다. 또한 Pinia 같은 상태 관리 라이브러리를 사용하여 API 응답을 전역 상태로 관리하고, 필요한 컴포넌트에서 공유할 수 있습니다. getCachedData 옵션을 사용하면 커스텀 캐싱 로직을 구현할 수 있고, 서버 사이드에서는 payload를 통해 클라이언트로 데이터를 전달하여 중복 요청을 방지합니다.

가상 스크롤링(Virtual Scrolling) 라이브러리인 vue-virtual-scroller를 사용하여 화면에 보이는 항목만 렌더링하고 나머지는 DOM에서 제거합니다. v-for를 사용할 때는 반드시 unique한 key를 지정하여 Vue가 효율적으로 DOM을 업데이트하도록 합니다. 리스트 아이템이 변경되지 않는다면 v-once 디렉티브를 사용하고, 무거운 컴포넌트는 lazy hydration을 적용합니다. 또한 페이지네이션이나 무한 스크롤을 구현하여 한 번에 렌더링하는 데이터 양을 제한하는 것도 효과적입니다.

routeRules는 nuxt.config.ts에서 페이지별로 캐싱 및 렌더링 전략을 설정할 수 있는 기능입니다. prerender를 사용하면 빌드 시점에 정적 HTML을 생성하고, swr을 사용하면 stale-while-revalidate 전략으로 캐시된 페이지를 제공하면서 백그라운드에서 업데이트합니다. isr을 설정하면 일정 시간마다 페이지를 재생성하는 Incremental Static Regeneration을 구현할 수 있습니다. 자주 변경되지 않는 블로그 글이나 상품 상세 페이지에 적용하면 서버 부하를 크게 줄이고 응답 속도를 향상시킬 수 있습니다.

Chrome DevTools의 Lighthouse를 사용하여 성능, 접근성, SEO 등을 종합적으로 측정하고 개선 제안을 받을 수 있습니다. Performance 탭에서는 런타임 성능을 프로파일링하여 느린 함수나 렌더링 병목을 찾을 수 있습니다. Network 탭으로 리소스 로딩 시간과 크기를 분석하고, Vue DevTools로 컴포넌트 렌더링 성능을 확인합니다. 또한 PageSpeed Insights나 WebPageTest 같은 온라인 도구로 실제 사용자 환경에서의 성능을 측정하고, Core Web Vitals(LCP, FID, CLS) 지표를 모니터링합니다.