[Next.js] 렌더링 방식 - CSR, SSR, SSG, ISR
우선 리액트를 공부하며 익숙한 렌더링 방식인 CSR, SSR이 있고
Next.js에서는 SSG와 ISR 이라는 렌더링 방식을 추가로 지원합니다.
✅ CSR (Client Side Rendering)
직역 : 클라이언트 측 렌더링
서버로부터 모든 정보를 받아 클라이언트에서 렌더링을 진행하는 방식입니다.
👍🏻 장점
1. 첫 로딩 이후 렌더링 속도가 빠르다.
2. SPA
3. 클라이언트에서 렌더링하므로 서버에 부하가 적다.
👎🏻 단점
1. 첫 페이지 로딩속도가 느리다.
2. SEO 최적화가 않좋다.
3. 보안에 취약하다. 보안에 대한 정보도 클라이언트로 전달됩니다.
4. CDN에 캐시가 안됩니다.
✅ SSR (Server Side Rendering)
직역 : 서버 측 렌더링
서버에서 렌더링을 진행 후 클라이언트에게 페이지를 전달하는 방식입니다.
👍🏻 장점
1. 첫 페이지 로딩 속도가 CSR에 비해 빠르다.
2. SEO 최적화가 좋다.
3. 보안에 좋다.
4. CDN에 캐시가 된다.
👎🏻 단점
1. 첫 페이지 이후 로딩 속도가 CSR에 비해 느리다.
2. 서버에 과부하가 걸릴 수 있다.
✅ SSG (Static Site Generation)
직역 : 정적 사이트 생성
SSR처럼 서버에서 렌더링을 진행합니다.
하지만 빌드 단계에서 미리 렌더링을 진행합니다. 따라서 정적이기 때문에 Static 입니다.
👍🏻 장점
1. 로딩 속도가 빠르다.
2. SEO 최적화 좋다.
3. 보안이 좋다.
4. CDN 캐시가 된다.
👎🏻 단점
1. 데이터가 정적이다.
- 동적 데이터가 필요한 사이트에는 적합하지 않다.
2. 사용자별 사이트를 미리 만들어두기 어렵다.
✅ ISR (Incremental Static Regeneration)
직역 : 증가하는 정적 재생성 (음.. 직역이 이번에는 딱히 와닫지는 않습니다.)
주기적으로 재생성되는 정적 사이트 입니다.
SSG 방식 + 주기적으로 렌더링 하여 SSG보다 덜 정적인 렌더링 방식입니다.
👍🏻 ISR의 장점
1. 로딩 속도가 빠르다.
2. SEO 최적화 좋다.
3. 보안이 좋다.
4. CDN 캐시가 된다. ----여기까지는 SSG의 장점과 동일
5. 추가로 데이터가 주기적으로 업데이트
👎🏻 ISR의 단점
🛠️ 용어 정리
⚙️ SPA
싱글 페이지 애플리케이션(Single Page Application, SPA)은 말그대로 하나의 페이지를 사용하는 애플리케이션이다. SPA는 서버로부터 새로운 페이지를 가져오는 것이 아닌, 하나의 페이지에서 내용을 동적으로 변경하는 사용자 웹앱을 의미한다. < - > MPA (Multi Page Application)
⚙️ CDN
CDN(Content Delivery Network) 전 세계에 분산된 서버 네트워크를 통해 콘텐츠를 효율적으로 전송하는 서비스
간단하게 말하자면 클라이언트와 물리적으로 가까운 서버에 요청, 응답 하는 기능입니다.
블리자드 미국 본사에 요청하는 것보다 블리자드 코리아에 요청하는것이 더 빠른 응답을 받을 수 있습니다.