✅ CSR (Client Side Rendering) - 클라이언트에서 그린다!
사용자가 최초 페이지에 접근한다면, 브라우저가 해당 웹 애플리케이션에 필요한 HTML과 정적자원(css, js, img 등)을 서버에 요청한다. 서버에서 기초적인 HTML과 자원들을 전송해주면, 브라우저는 HTML을 해석하여 DOM을 생성하고 자원들을 다운로드 한다. 이후 자바스크립트 엔진에 의해 js파일들이 실행되고, 페이지에서 보여줄 컴포넌트가 동적으로 생성되고 렌더링 되는 방식이다.
📱 예를 들어:
- 네가 웹사이트 주소를 딱 입력했어.
- 그럼 서버는 껍데기 HTML이랑 JS 파일, CSS 파일 같은 재료들만 보내줘.
- 브라우저는 그걸 받아서,
- HTML 보고 뼈대를 만들고 (DOM 생성)
- CSS로 꾸미고
- JS(자바스크립트)로 실제 화면 내용을 채워.
👉 즉, "완성된 페이지"는 네 브라우저 안에서 자바스크립트가 실행되면서 그려지는 거야.
장점
- View 렌더링을 브라우저에게 담당시킴으로써 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공해준다.
- 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.
단점
- 첫 페이지 로딩 속도가 SSR에 비해 비교적 느리다. (서버에 첫 요청시, 전체 페이지에 대한 모든 문서 파일을 전달받기 때문)
- 검색엔진최적화(SEO)에 대한 추가 보완 작업이 필요하다.
✅ SSR (Server Side Rendering) - 서버에서 그린다!
SSR은 서버 사이드 렌더링 말 그대로 HTML 파일을 서버에서 렌더링을 진행한다는 것이다. 각 페이지 URL 마다 보여줄 내용이 미리 결정되어 있다. 사용자가 웹 페이지에 접속하면 브라우저가 해당 URL을 서버에 요청하고, 서버는 이 URL을 기준으로 어떤 페이지를 렌더링할지 결정한다. 즉 pre-rendering된 HTML 파일을 가져온 후 데이터를 담아서 전달한다는 것이다.
📱 예를 들어:
- 네가 어떤 웹사이트 주소에 접속해.
- 브라우저가 서버에 "이 페이지 보여줘!" 하고 요청을 보내.
- 서버는 그 페이지를 미리 만들어서(HTML 완성본) 바로 보내줘.
- 브라우저는 그걸 받아서 바로 보여주기만 하면 돼.
👉 즉, "완성된 페이지"를 서버가 미리 만들어서 보내주는 방식이야.
장점
- 첫 페이지 로딩 속도가 CSR에 비해 비교적 빠르다. (해당 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링하기 때문)
- 검색엔진최적화(SEO)가 가능하며, 수월하다.
단점
- 초기 로딩 이후 페이지 이동 시, 속도가 다소 느리다.
- 매번 새로고침으로 인한 깜빡임 이슈
- 서버 과부하
- TTV(Time to View) / TTI(Time to Interact)의 공백시간
✅ SSG (Static Site Generation) - 정적 사이트를 생성한다!
SSG는 Next.js에서 페이지를 생성할 때, 기본으로 적용되는 설정이다. SSG 역시 서버 사이드에서 렌더링을 하지만, SSR과 다른 점은 클라이언트가 요청하는 시점이 아니라 빌드(Build)시에 페이지를 미리 생성해 놓는 것이다. 별다른 설정 없이도 SSG가 생성이 되지만, Data Fetching이 필요한 경우에는 getStaticProps라는 함수를 활용하여 pre-rendering을 진행한다. 실시간 데이터가 아니라는 점도 큰 특징이다.
✅ ISR (Incremental Static Regenertaion) - 일정 시간마다 재생성!
ISR은 빌드 시점에 페이지를 렌더링 한 후에 설정한 시간마다 즉, 특정 주기마다 페이지를 새로 렌더링한다. ISR로 구분했지만 사실 SSG에 포함되는 개념이라고 할 수 있다. SSG와 차이점은 빌드 시에 페이지를 생성하기 때문에 Data Fetching하는 데이터가 변경되면 다시 빌드해야하는 SSG와는 달리 일정 시간마다 알아서 페이지를 업데이트 해준다.
