회고록
오늘은 Next.js를 배우면서 4가지 주요 렌더링 기법을 정리할 생각이다.
- CSR(Client Side Rendering)
- 특징
- 순수 React 사용했을 때 100%
- 브라우저에서 JavaScript를 이용해 동적으로 페이지를 렌더링하는 방식
- 렌더링의 주체 : 클라이언트
- 장점
- (최초 한번 로드가 끝나면) 사용자와의 상호작용이 빠르고 부드럽습니다.
- 서버에게 추가적인 요청을 보낼 필요가 없기 때문에, 사용자 경험이 좋습니다.
- 서버 부하가 적음
- 단점
- 첫 페이지 로딩 시간(Time To View)이 길 수 있습니다.
- JavaScript가 로딩 되고 실행될 때까지 페이지가 비어있어 검색 엔진 최적화(SEO)에 불리합니다.
기존에 계속 작업했떤 react 부분이 CSR기법이며 가장 익숙했다.
- SSG(Static Site Generation)
- 특징
- 서버에서 페이지를 렌더링 하여 클라이언트에게 HTML을 전달하는 방식입니다.
- 최초 빌드 시에만 생성이 됨
- 사전에 미리 정적 페이지를 여러 개 만들어놓음 → 클라이언트가 홈페이지 요청을 하면, 서버에서는 이미 만들어져있는 사이트를 바로 제공! → 클라이언트는 표기만 함
- 장점
- 첫 페이지 로딩 시간이 매우 짧아(TTV) 사용자가 빠르게 페이지를 볼 수 있습니다. 또한, SEO에 유리합니다.
- CDN(Content Delivery Network) 캐싱 가능
- 단점
- 정적인 데이터에만 사용할 수 있음
- 사용자와의 상호작용이 서버와의 통신에 의존하므로, 클라이언트 사이드 렌더링보다 상호작용이 느릴 수 있습니다. 또한, 서버 부하가 클 수 있습니다.
- 마이페이지 처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가
사용자가 데이터 수정등 동적인 요청을 사용하는 페이지에서는 맞지 않는 랜더링 방식이다. Next.js는 디폴트 SSG방식이다
- ISR(Incremental Static Regeneration)
- 특징
- SSG처럼 정적 페이지를 제공
- 설정한 주기만큼 페이지를 계속 생성해 줌
- ex : 주기가 10분이라면? → 10분마다 데이터베이스 또는 외부 영향 때문에 변경된 사항을 반영하는 역할
- 정적 페이지를 먼저 보여주고, 필요에 따라 서버에서 페이지를 재생성하는 방식입니다.
- 장점
- 정적 페이지를 먼저 제공하므로 사용자 경험이 좋으며, 콘텐츠가 변경되었을 때 서버에서 페이지를 재생성하므로 최신 상태를 (그나마) 유지할 수 있습니다.
- CDN 캐싱 가능
- 단점
- 동적인 콘텐츠를 다루기에 한계가 있을 수 있습니다. ( 실시간 페이지 아님 )
- 마이페이지 처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가
SSG 랜더링 방식이랑 유사하지만 일정 주기마다 리렌더링 시켜줄수 있다.
- SSR(Server Side Rendering)
- 특징
- SSG, ISR처럼 렌더링 주체가 서버!
- 클라이언트의 요청 시 렌더링
- C → S : 이 페이지 줘!
- S → C : (데이터베이스 읽고 등등 한 후) html 파일을 제공
- 장점
- 빠른 로딩 속도(TTV)와 높은 보안성을 제공합니다.
- SEO 최적화 좋음
- 실시간 데이터를 사용
- 마이페이지 처럼 데이터에 의존한 페이지 구성 가능
- CDN 캐싱 불가
- 단점
- 사이트의 콘텐츠가 변경되면 전체 사이트를 다시 빌드해야 하는데, 이 과정이 시간이 오래 걸릴 수 있습니다. → 서버 과부하
- 요청할 때 마다 페이지를 만들어야 함
렌더링 주체가 서버이며 동적인 부분을 사용 가능하다
| CSR | SSR | SSG | |
|---|---|---|---|
| 빌드 시간 | 짧다 | 짧다 | 길다 |
| SEO | 나쁨 | 좋음 | 좋음 |
| 페이지 요청에 따른 응답 시간 | 보통 | 길다 | 짧다 |
| 최신 정보인가? | 맞음 | 맞음 | 아님 |
랜더링 4가지를 배웠는데 내일은 어떻게 사용하고 잘활용하는지에 대해 배울 예정이다.
