공식 홈페이지 Next.js로 마이그레이션

카테고리

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

서브카테고리

웹 개발

대상자

• *웹 개발자, 성능 최적화 담당자**
• 난이도: 중간 (Next.js 13 기반 기술, SEO/캐싱 전략 적용)*

핵심 요약

• Next.js 13의 캐싱 메커니즘(Request Memoization, Data Cache, Full Route Cache)을 활용해 성능 향상
• ISR(Incremental Static Regeneration) 적용으로 초기 렌더링 속도 개선 및 데이터 갱신 효율화
• SEO 최적화를 위해 Meta Data, robots.txt, sitemap.xml 설정 및 이미지 priority, Link 프리페치 적용

섹션별 세부 요약

1. Next.js 캐싱 메커니즘

• Request Memoization: 동일한 fetch() 요청에 대해 서버 내부에서 중복 요청 방지
• Data Cache: next: { revalidate: 3600 } 설정으로 1시간 간격의 데이터 캐싱
• Full Route Cache: Static Rendered 페이지 재사용으로 렌더링 비용 감소
• Router Cache: 클라이언트에서 네비게이션 요청 감소

2. 기존 홈페이지 문제점

• CSR 기반으로 초기 로딩 속도 저하(LCP 7초)
• SEO 최적화 부족으로 크롤러 인식 불가
• 프로젝트 페이지 분리로 접근성 및 유지보수성 저하
• 반응형 미지원으로 모바일 UI 깨짐

3. 마이그레이션 전략

• ISR 적용: 1주일 간격의 정적 페이지 갱신으로 서버 부하 감소
• SSG 대신 ISR 선택: 동적 데이터 갱신 필요성 대응
• TailwindCSS로 스타일 재구성, HTML/컴포넌트 구조 처음부터 재설계

4. SEO 및 성능 개선 사항

• 이미지 태그에 priority 옵션 적용으로 크리티컬 이미지 우선 로딩
• Link 태그로 프리페치 적용으로 네비게이션 속도 향상
• Meta Data, robots.txt, sitemap.xml 설정으로 검색 엔진 노출 증가

결론

• ISR + Full Route Cache 적용으로 서버 부하 감소 및 초기 로딩 속도 개선(성능 70% 향상)
• SEO 최적화를 위해 Meta Data, 이미지 우선순위, 프리페치 설정 필수
• Next.js 13 기반 캐싱 메커니즘 활용 시 정적/동적 데이터 관리의 균형 도출 가능