Browser Rendering
DOM + CSSOM => Render Tree
CSR(Clien Side Rendering)
클라이언트에서 HTML파일 렌더링을 진행한다.
장점
- 첫 페이지 이후 로딩속도가 빠르다.
- 페이지 이동시 화면이 깜빡임이 없어 좋은 사용자 경험을 제공한다.
단점
- 첫 페이지 로딩 속도가 느리다.
- SEO에서 단점을 가진다.
SSR(Sever Side Rendering)
서버에서 HTML파일을 렌더링을 진행한다.
장점
- 첫 페이지 로딩 속도가 빠르다.
- SEO에서 이점을 가진다.
단점
- 서버 부하가 높아진다.
- 페이지 이동시 화면이 깜빡여 사용자 경험이 저하된다.
SSG(Static Side Genetation)
빌드하는 순간 기점으로 서버에서 HTML 렌더링 된 정적 페이지
장점
- SSR는 빌드시 HTML이 생성되고 요청마다 재사용한다.
- CDN 캐시, SEO, 페이지 로딩 등의 이점
단점
- 정적 페이지기에 동적 데이터가 제한 된다.
- 사용자별로 달라지는 정보 제공이 어렵다. (ex: mypage)
ISR(Incremental Static Regenetation)
SSG와 비슷하지만 서버에서 정적 페이지를 정기적으로 다시 빌드한다.
장점
- 개인페이지, 블로그등의 자주 변경되지 않는 동적 페이지에 효율적
- CDN 캐시, SEO, 페이지 로딩 등의 이점
단점
- 정기적으로 빌드를 하지만 여전히 최신 데이터를 로드하지 못한다.
- 여전히 사용자별로 달라지는 정보 제공이 어렵다. (ex: mypage)
-사용자 경험이 중요하며 클라이언트의 상태 변경이 잦은 경우 CSR
-첫 페이지 로딩 속도, SEO가 중요한 경우 SSR
-컨텐츠 내용이 변하지 않고, 빠른 HTML가 필요한 경우 SSG
-컨텐츠가 동적이지만 자주 변경되지 않는 경우 ISR
