🧐 Next.js를 학습하기에 앞서...
Next.js는 리액트 기반의 프레임워크로 웹 애플리케이션을 만드는 데 필요한 전체적인 솔루션을 제공한다. 기본적으로 React로 만든 애플리케이션은 SPA로 간주하는데 이는 Client Side Rendering 방식을 채택한다. Next.js를 사용하면 Server Side Rendering 뿐만 아니라 하이브리드 렌더링도 가능하기 때문에 많은 개발자들이 사용하는 프레임워크인데 이러한 Next.js를 사용하기에 앞서 렌더링 방식의 종류와 각 방식의 장∙단점에 대해 짚고 넘어가고자 한다.
💡 CSR(Client Side Rendering)
: 렌더링하는 주체가 클라이언트, 즉 브라우저인 렌더링 방식으로 서버에서 HTML 파일, React 라이브러리, 작성한 js 코드 등을 다운받아 브라우저에서 DOM요소로 변환하여 보여주는 방식
- 장점
- 첫 번째 로딩 이후부터는 빠른 UX 제공
- 부분적인 데이터만 가져오므로 서버에 부담이 적음
- 문제점
- 긴 페이지 로딩 시간(TTV: Time To View), First Contentful Paint까지 시간 소요↑
- 브라우저에서 자바스크립트 활성화 필수
- SEO에 불리
- 중요 정보를 브라우저에 담고 있기에 보안에 취약
- HTML파일이 CDN(Content Delivery Network)에 캐시 안됨
💡SSG(Static Site Generation)
: 렌더링하는 주체가 서버로 빌드할 때 렌더링하며 정적인 사이트(HTML파일)로 변환하여 배포하는 방식
- 장점
- 빠른 페이지 로딩 시간
- 자바스크립트 활성화 불필요
- SEO에 유리
- 보안이 뛰어남
- CDN에 캐시 가능
- 문제점
- 일반적인 정적 데이터만 제공하므로 사용자별 정보 제공이 어려움
💡ISR(Incremental Static Regeneration)
: 렌더링하는 주체가 서버로 주기적으로 렌더링하는 방식, 즉 정해진 주기에 따라 페이지를 다시 생성
- 장점
- 빠른 페이지 로딩 시간
- 자바스크립트 활성화 불필요
- SEO에 유리
- 보안이 뛰어남
- CDN에 캐시 가능
- 데이터가 주기적으로 업데이트
- 문제점
- 실시간 데이터를 받아오지는 않음
- 사용자별 정보 제공의 어려움
💡SSR(Server Side Rendering)
: 렌더링하는 주체가 서버로 클라이언트가 요청 시 렌더링하는 방식
- 장점
- 빠른 페이지 로딩 시간
- 자바스크립트 활성화 불필요
- SEO에 유리
- 보안이 뛰어남
- 실시간 데이터 사용
- 사용자별 필요한 데이터 사용 가능
- 문제점
- SSG/ISR에 비해 속도가 상대적으로 느림
- 서버에 과부하가 걸릴 가능성 있음
- CDN에 캐시 안됨
