[2025. 03. 12 수요일]
Next.js를 배우는 과정에서 알고있어야 할 개념들에 대해서 정리해본다.
1. 기존 리액트의 단점과 SPA, 코드 스플리팅
-
기존에 사용하던 리액트는 SPA(Single Page Application) 방식을 사용한다.
애플리케이션의 모든 뷰가 하나의 HTML 파일 내에서 JS로 관리되고, 클라이언트(브라우저)에서 동적으로 페이지(컴포넌트) 전환이 이루어진다.
-
JS의 비중이 크기 때문에 전체 애플리케이션 코드가 한꺼번에 로드될 경우 초기 로딩 속도가 느려질 수 있다. 또한 JS가 모두 로드되고 온전한 렌더링이된 후에 실행되기 때문에 초기에 사용자에게 빈 화면이 보여질 수도 있다.
-
클라이언트에서 렌더링되기 때문에, 검색 엔진 봇이 JS 실행 전에 빈 HTML만 보게 될 가능성이 있어 SEO 최적화에 불리하다.
-
위와 같은 사항들을 개선하기 위해 JS를 쪼개서 필요한 부분만 먼저 로드하는 코드 스플리팅이 필요 하다.
-React.lazy,next/dynamic
2. Hydration, TTV, TTI
Hydration
서버에서 렌더링된 정적 HTML을 클라이언트(브라우저)의 JS가 가져와서, 이벤트 핸들러를 붙이는 등의 작업을 수행해 페이지를 동적으로 만드는 과정.
- 수업에서는 북어포에 물을 적신다고 설명을 했다.
정적 HTML(TTV)에 JS(TTI)를 채워, TTV와 TTI의 간극을 채우는 개념을 수(水)화라고 한다.
- SSR로 빠르게 보여진 정적 콘텐츠를, 사용자가 상호작용할 수 있도록 전환하는 단계다.
TTV (Time to View)
- 사용자가 페이지를 요청한 후, 시각적으로 콘텐츠가 브라우저에 표시되기까지 걸리는 시간으로, 사용자가 콘텐츠를 인지할 수 있는 순간이다.
TTI (Time to Interaction)
- 페이지가 사용자가 인터렉션할수 있는 상태(클릭, 스크롤 등 사용자의 상호작용에 반응할 수 있는 상태)가 되기까지 걸리는 시간을 의미한다.
3. JS의 런타임 환경 2가지
1) 브라우저 환경 (Client-side)
- 사용자 디바이스(브라우저)에서 실행
- DOM, 브라우저 API 등을 이용해 UI를 조작
- 사용자와의 직접 상호작용, 이벤트 처리, 동적 페이지 업데이트
2) Node.js 환경 (Server-side)
- 서버에서 실행되는 자바스크립트 런타임
- 파일 시스템, 네트워크 요청 등 서버 관련 작업에 적합
- SSR, API 서버, 빌드 도구 등
Next.js는 이 두 환경을 모두 활용하여, 서버에서 초기 HTML을 렌더링하고 클라이언트에서 인터랙션을 관리합니다. 라고 한다.
두 가지 환경을 모두 활용하기 때문에 Next.js 공식문서에서 Web Server 프레임워크라고 소개하고 있다.
5. SSG, ISR, SSR, CSR의 차이점
SSG (Static Site Generation)
- 개념:
빌드 시 미리 HTML을 생성하여 정적 파일로 배포하는 방식. - 장점:
빠른 로딩 속도, 낮은 서버 부하, 높은 보안성 - 적합한 경우:
콘텐츠 업데이트가 자주 일어나지 않는 페이지
ISR (Incremental Static Regeneration)
- 개념:
SSG의 장점을 유지하면서, 특정 간격이나 조건에 따라 정적 페이지를 업데이트할 수 있는 방식. - 장점:
정적 사이트의 빠른 로딩과 함께, 최신 데이터를 제공할 수 있음. - 적합한 경우:
일부 페이지는 정적이지만, 주기적인 업데이트가 필요한 경우
SSR (Server-Side Rendering)
- 개념:
사용자의 요청마다 서버에서 HTML을 렌더링해 제공하는 방식. - 장점:
항상 최신 데이터를 반영할 수 있고, SEO에 유리 - 단점:
서버 부하 증가, 응답 시간이 빌드된 정적 파일보다 느릴 수 있음
CSR (Client-Side Rendering)
- 개념:
브라우저에서 자바스크립트를 통해 동적으로 콘텐츠를 렌더링하는 방식. - 장점:
풍부한 인터랙티브 기능과 동적 업데이트가 용이함 - 단점:
초기 로딩 시 빈 화면 또는 로딩 상태가 길어질 수 있으며, SEO 최적화가 어려울 수 있음
Next.js TIP
- 기본적으로 Server Component이며, 렌더링단위 역시 Component라는것을 인지하면 조금은 Next.js를 이해하는데 도움이 된다!!
- Client와 Server는 상대적인 개념이라는 것도 유의하자!
