최근에 Next.js 학습을 시작했습니다.
오늘은 학습하면서 정리했던 내용을 공유해보려고 합니다.
렌더링의 종류는 크게 4가지가 있습니다.
CSR, SSG, ISR, SSR 4가지의 특징과 장단점을 이야기 해보겠습니다.
👉🏻CSR 특징
클라이언트(브라우저) 측에서 렌더링합니다.
1. 사용자가 Website 요청을 보냄
2. 브라우저는 HTML을 다운로드 합니다.
3. 이어서 브라우저가 JS파일과, React.JS파일를 다운로드합니다.
1. React.JS 소스코드 로드해서 메모리에 탑재하면서 리액트가 실행이되고,
2. HTML페이지에 있는 div root요소에 JS파일에 있는 root 컴포넌트를 연결시켜줘서 JS 소스코드를 하나씩 해석한 다음에 컴포넌트를 DOM요소로 변환을 하고, DOM트리 변환된것을 브라우저에 패인팅되는 작업 까지 완료가 되어야지 사용자가 처음으로 페이지를 볼 수 있게 됩니다.
🎯정리
서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 아무것도 볼수가 없다.
CSR 장점
- 한번만 로딩 되면, 그 다음 빠른 UX 제공
- 서버의 부하가 작음
CSR 단점
- 첫 페이지 로딩 시간 TTV(time to view)이 길다.(첫 로딩이 길다.) 이걸 다른말로 FCP(First Contentful Paint)라고 합니다.
- 자바스크립트 설정 활성화 필수임
- SEO 최적화가 힘듬
- 보안에 취약함
- CDN(Content Delivery Network)에 캐시가 안됨
👉🏻SSG 특징
정적인 사이트를 서버측에서 빌드할때 렌더링합니다.
NEXT.js 작업한 파일을 빌드를 할때 작업한 React코드를 html파일로 변환해줍니다. 그래서 코드에서 서버에있는 데이터 베이스를 읽거나, 또는 클라이언트 데이터 베이스에서 데이터를 읽어와서 만든다면 그런것들 모두다 빌드할때 실행이 됩니다.
필요한 코드들 다 실행하고, 브라우저 상에서 어떻게 표기될건지 태그들을 하나씩 만들어서 실제 HTML 파일들을
빌드할때 만들어 둡니다. 그래서 빌드가 완료되면 서버측에 실제 HTML 파일들을 가지고 있게 됩니다.
- 그러면 클라이언트는 사이트에 접속하면 서버에 요청을하게 될것이고,
- 로딩중 보이고,
- 서버는 HTML 파일을 응답해주고,
- 클라이언트는 바로 받아온 페이지를 표기만 하면 됩니다.
이렇게 HTML 파일을 서버측에서 미리 만들어 두어서 HTML을 받아오기 때문에 다음에 사용자가 사이트를 방문하면 이제는 서버까지 요청하지 않아도, 중간에 CDN에 캐쉬된 HTML파일을 빠르게 가져올수 있습니다.
SSG 장점
- 첫 페이지 로딩 시간 TTV(time to view)이 빠름
- 자바스크립트 설정 필요 없음
- SEO 최적화가 좋음
- 보안이 뛰어남
- CDN에 캐시가 됨
SSG 단점
- 데이터가 정적임 (빌드될때 미리 HTML파일 (정적인 데이터)를 만들어놓는것 때문에 발생하는 문제) (블로그 같은 데이터가 잘 바뀌지 않는 사이트라면 적합할수도 있지만, 가변적으로 자주 바뀌는 사이트라면 적합하지 않습니다.)
- 사용자별 정보 제공이 어려움
👉🏻ISR 특징
정적인 사이트를 서버측에서 주기적으로 렌더링합니다.
설정한 주기만큼 페이지를 계속해서 다시 만들어 줍니다.
예를 들어서 5분 마다 ISR이 되도록 설정이 되어있다면 처음에 빌드할때 웹사이트를 만들어 두고, 그리고 5분 있다가 다시 사이트를 만듭니다. 그래서 사이트를 만들고 그동안에 클라우드 데이터 베이스가 업데이트 되거나, 데이터 베이스에 변경사항이 업데이트 된다면 5분 뒤에 만들어진 사이트에는 이런 변경사항들이 반영이 되어서 최신화된 데이터를 불러올수 있는것입니다.
그래서 기본적으로 SSG와 동일한 원리 입니다.
단, 정해진 주기에 따라 페이지를 다시 렌더링해서 생성함 입니다.
ISR 장점
- 첫 페이지 로딩 시간 TTV(time to view)이 빠름
- 자바스크립트 설정 필요 없음
- SEO 최적화가 좋음
- 보안이 뛰어남
- CDN에 캐시가 됨
- 데이터가 주기적으로 업데이트 됨
ISR 단점
- 실시간 데이터가 아님
- 사용자별 정보 제공이 어려움
🎯정리
SSG 보다는 변경사항을 주기적으로 업데이트할수 있다는 장점이 있지만
여전히 실시간 데이터를 반영할수 없고, 사용자별 달라지는 데이터를 제공할수 없습니다.
React로만 만든다면 CSR이다. 이걸 보안해주기 위해서 나온데 SSG이고 (게츠비같은 프레임워크를 사용하면 React를 기반으로 SSG이 가능합니다.) SSG은 너무 정적이나깐 주기적으로 사이트를 만들기 위해서 ISR이 나오게 되었습니다.
SSG / ISR 모두 여전히 실시간 데이터가 아니고, 사용자별 정보 제공이 어렵기 때문에 이걸 가능하게 하기위해서는 SSR을 사용해야 합니다.
👉🏻SSR 특징
클라이언트가 요청할때 서버측에서 렌디링을 해서 결과를 클리이언트에 보내줍니다.
SSR 장점
- 첫 페이지 로딩 시간 TTV(time to view)이 빠름
- 자바스크립트 설정 필요 없음
- SEO 최적화가 좋음
- 보안이 뛰어남
- 실시간 데이터를 사용!
- 사용자별 필요한 데이터를 사용함.
SSR 단점
- SSG와,ISR를 비교했을때 느릴 수 있음
- 서버에 과부하가 걸릴 수 있음
- CDN에 캐시가 안됨
그래서 위에서 배운 SSG / ISP 와 같은 “실시간 데이터를 사용하지 못한다는거”, “사용자별 데이터 제공이 안된다는 것”에대한 해결책은 될수 있지만 페이지 전체 모두다 SSR로 작업 해버리면 서버의 과부하가 걸릴 수 있고요 사용자 1000명이 동시 접속하면 오래걸릴수 있습니다.!!
🎯결론
하나의 완벽한 렌더링 솔루션은 없다!!
상황에 맞에 언제 어떤방식으로 렌더링하는 것이 좋은지에 대해서 고민해야 하는 부분 입니다.
Next.js가 제공해주는 "하이브리드(Pre-rendering)" 방식 이라고 해서
각기다른 페이지 별로 4가지 렌더링 방식을 혼합해서 선능좋은 웹앱을 만들수 있게 해줍니다.
