CSR (Client-Side Rendering)
클라이언트에서 렌더링을 하는 방식
순서 흐름
1. 사용자가 브라우저를 통해서 URL 요청한다
2. 서버는 빈 HTML + JS 번들 파일을 응답한다
3. 브라우저가 JS 파일을 실행하여, JS가 API 호출로 데이터 가져온다
4. 가져온 데이터로 브라우저가 HTML을 그린다
특징
- 초기에는 빈 화면이 뜬다
- 화면 전환은 빠르지만, 첫 로딩이 느리다
SSR (Server-Side Rendering)
서버가 렌더링을 하는 방식
순서 흐름
1. 사용자가 페이지를 요청한다
2. 서버가 해당 페이지에 대한 데이터를 조회한다
3. 서버가 데이터를 기반으로 HTML을 완성시켜서 응답한다
4. 브라우저는 완성된 HTML을 바로 렌더링한다
5. 그 후 JS가 실행되어 페이지가 상호작용 가능해진다
특징
- 첫 화면이 즉시 보인다
- 요청마다 서버 연산이 발생한다
SSG (Static Site Generation)
빌드할 때 미리 렌더링해두는 방식
순서 흐름
1. 배포(빌드) 시점에 서버가 모든 HTML 파일을 미리 생성한다
2. 생성된 HTML은 CDN(정적 서버)에 저장된다
3. 사용자가 페이지를 요청한다
4. 이미 만들어진 HTML 파일을 바로 전달한다
5. 브라우저가 렌더링 후 JS가 실행된다
특징
- 초기 로딩이 매우 빠르다 (CDN에서 바로 전송)
- 데이터가 변경되면 다시 빌드가 필요하다
ISR (Incremental Static Regeneration)
SSG에 갱신 주기를 더한 방식
순서 흐름
1. 배포(빌드) 시점에 서버가 모든 HTML 파일을 미리 생성한다 (SSG와 동일)
2. 생성된 HTML은 CDN(정적 서버)에 저장된다
3. 사용자가 페이지를 요청한다
4. 이미 만들어진 HTML 파일을 바로 전달한다
5. revalidate 시간이 지나면 다음 사용자의 요청 시 서버가 새 HTML을 백그라운드에서 재생성한다
6. 이후 새 HTML이 CDN에 업데이트된다
특징
- 초기 속도는 SSG만큼 빠르고, 데이터는 SSR처럼 최신에 가깝다
