📝 NEXT.JS 주요 키워드
1. 사전 렌더링 (Pre-rendering) 🔨
정적 페이지를 미리 생성하여 사용자에게 더 빠른 로딩 속도를 제공하는 기술이다.
Next.js는 두 가지 주요 사전 렌더링 방식을 지원한다.
1.1 Static Generation (정적 생성) 🌐
- 페이지가 빌드 시간에 HTML로 미리 생성된다.
- 콘텐츠가 자주 변경되지 않는 경우에 적합하며, 생성된 HTML 파일은 클라이언트가 요청할 때 즉시 제공된다.
1.2 Server-Side Rendering (SSR, 서버 측 렌더링) 🌍
- 페이지가 요청 시 서버에서 동적으로 생성된다.
- 최신 데이터를 반영할 수 있어, 자주 변경되는 콘텐츠에 적합하다.
ISR과 CSR
- Incremental Static Regeneration (ISR): 정적 생성의 장점을 유지하면서도, 특정 페이지를 필요에 따라 업데이트할 수 있다.
처음엔 정적으로 생성된 페이지를 제공하고, 이후 설정한 주기에 따라 페이지를 재생성하여 최신 콘텐츠를 반영할 수 있다. - Client-Side Rendering (CSR): 클라이언트에서 JavaScript를 사용하여 페이지를 렌더링한다. Next.js에서는 CSR을 이용하여 동적 콘텐츠를 처리할 수 있으며, 전체 페이지가 아닌 일부 컴포넌트만 클라이언트에서 로드할 수 있다.
전통적인 사전 렌더링 방식
- Static Generation (SSG)와 Server-Side Rendering (SSR)이 주로 사용된다.
2. 웹 성능 지표
2.1 FCP (First Contentful Paint) ⏱️
- 사용자가 페이지를 처음 탐색한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링된 시점까지의 시간을 측정.
- 만족스러운 사용자 환경을 제공하기 위해 첫 콘텐츠 페인트가 1.8초 이하가 되도록 노력해야 한다.
- FCP는 웹 성능 최적화와 사용자 경험 개선에 중요한 역할을 하며, 페이지가 얼마나 빠르게 반응하는지를 나타내는 지표다.
2.2 LCP (Largest Contentful Paint) 📏
- 웹 페이지에서 가장 큰 콘텐츠 요소가 로드되는 시간을 측정하는 지표.
- 일반적으로 페이지의 주요 콘텐츠(예: 큰 이미지, 비디오, 블록 텍스트)가 사용자에게 완전히 렌더링되는 순간을 기준으로 한다.
- LCP가 짧을수록 사용자 경험이 개선되고, 페이지가 빠르게 사용 가능하다는 것을 의미한다.
FCP와 LCP의 차이점:
- FCP는 페이지 로드 시 첫 번째 콘텐츠가 나타나는 순간을 측정하고,
LCP는 페이지에서 가장 큰 콘텐츠 요소가 렌더링되는 시간을 측정한다.
두 지표 모두 웹 페이지 성능을 평가하는 데 중요한 역할을 한다.
3. 하이드레이션 (Hydration) 💧
서버에서 렌더링된 HTML을 클라이언트 측에서 JavaScript로 활성화하는 과정을 의미한다.
하이드레이션을 통해 초기 렌더링 속도를 높이고, 사용자 경험을 개선할 수 있다.
하이드레이션 과정
- 클라이언트가 페이지를 로드하면, 서버에서 받은 HTML이 브라우저에 표시된다.
- 이후 JavaScript 번들이 로드되고 실행되면서 DOM을 하이드레이트 한다.
즉, 서버에서 생성된 정적 HTML에 인터랙티브한 기능을 부여한다.
하이드레이션의 중요성
- 성능 향상: 초기 HTML을 서버에서 렌더링하면 사용자가 페이지를 빠르게 볼 수 있고, 페이지가 즉시 보이게 된다.
이후 JavaScript 번들이 모두 로드되면 페이지가 인터랙티브해진다. - 사용자 경험 개선: 사용자가 페이지를 볼 수 있는 시간을 단축시켜 더 나은 사용자 경험을 제공한다.
하이드레이션이 완료되면 페이지의 모든 기능이 활성화되어 사용자가 상호작용할 수 있다. - SEO 최적화: 서버에서 미리 렌더링된 HTML은 검색 엔진이 더 쉽게 크롤링할 수 있도록 도와준다.
고려사항 ⚠️
- 불일치 문제: 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 결과가 불일치할 경우 경고나 오류가 발생할 수 있다.
이를 방지하기 위해 서버와 클라이언트의 상태를 일치시키는 것이 중요하다.
