next.js 성능 개선: SSR에서 SSG + ISR로의 전환

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *대상자**: Next.js 프레임워크를 사용하는 웹 개발자 및 고성능 사이트 운영자
• *난이도**: 중급

핵심 요약

• SSR(SSR)의 한계를 극복하기 위해 SSG + ISR(Incremental Static Regeneration) 전환
• revalidate: 7200 설정으로 정적 페이지의 자동 갱신 구현
• Vercel 빌드 시간 제한 문제 해결: 콘텐츠 배치, 로컬 JSON 저장, getStaticProps 최적화

섹션별 세부 요약

1. SSR의 한계와 문제점

• SSR로 인한 TTFB(Time to First Byte) 및 FCP(First Contentful Paint) 지연
• PageSpeed Insights와 Lighthouse 분석 결과: 서버 응답 시간이 SEO 및 사용자 경험에 악영향
• 예시 사이트: nolcardbalanceae.com, wgustudentsportal.com

2. SSG + ISR로의 전환

• getStaticProps 사용으로 정적 생성 및 ISR 기능 활성화
• 코드 예시:

```javascript

return { props: { data }, revalidate: 7200 }; // 2시간마다 데이터 갱신

```

• 결과: 즉시 페이지 로딩 및 배경에서의 데이터 갱신

3. Vercel 빌드 시간 제한 문제 해결

• 45분 빌드 시간 제한 문제 해결 방안:
• 콘텐츠 배치 (batching)
• 로컬 JSON 저장
• getStaticProps()에서 JSON 호출
• 최종 빌드 시간: 30분 미만으로 단축

4. 전환 후 성과

• nolcardbalanceae.com: 이탈률 20% 감소
• wgustudentsportal.com: 1초 미만 로딩 시간 달성
• Lighthouse 점수: 95+ 유지
• Googlebot 크롤링: 일일 URL 수 3배 증가

결론

• Next.js의 SSG + ISR 전략을 통해 성능 향상 및 SEO 개선 가능
• Vercel 빌드 시간 제한을 극복하기 위해 콘텐츠 배치 및 JSON 저장이 필수적
• Google의 Core Web Vitals 기준 준수와 Next.js 최적화 가이드라인을 따르는 것이 핵심