페이지 렌더링 비교 (SSR vs CSR vs SSG

1. SSR ( Server Side Rendering

1-1 최초 페이지 로딩 시간 짧음 (CSR 보다)

1-2 JS 실행이 완료될 때까지 인터렉션 불가

1-3  페이지 이동에 걸리는 시간이 CSR보다 길다

1-4  검색엔진 최적화(SEO)에 적합

2. CSR (Client Side Rendering)

2-1 최초 페이지 로딩 시간이 김 (SSR보다)

2-2 페이지 이동 시간 짧음

2-3 data request를 받아올때까지 빈 화면 표출 (로딩)

3. SSG (Static Site Generation)

SSR 

• 서버에서 페이지를 렌더링하는 방식 ( Next.js , PHP ASP ) 

1. Client가 특정 페이지 요청
2. Server에서는 해당 페이지에 필요한 data를 포함한 HTML 파일을 Client에 전달
3. Client는 해당 HTML을 파싱하면서 필요한 정적 리소스와 JS 파일 다운로드하고 페이지를 렌더링한다.
4. Client에서 다운로드한 JS 파일 실행
5. Page 인터렉션 가능

• 특징
  • 최초 페이지 로딩 시간 짧음
  • JS 실행 완료 전까지 인터렉션( 클릭 등 페이지 상호작용) 불가능
  • 페이지 이동 시 소요 시간이 CSR보다 긺(이동시마다 해당 페이지에 필요한 리소스를 다운로드 및 생성해서)
  • SEO에 적합 - 서버에서 페이지를 생성하므로 빈 문서보다 완성된 HTML 문서를 접하므로 SEO 최적화

 

CSR 

• Client(Browser)에서 페이지를 렌더링하는 방식
• React, Vue, Angular등이 속함 

1. client가 특정 페이지 요청
2. 서버에서는 빈 HTML 문서를 client에 전달
3. client가 HTML 문서에 포함된 정적 리소스, 번들 JS파일을 다운로드 함
4. client에서 번들 JS 파일 실행. JS에 의해 페이지가 렌더링되며 API에서 데이터를 받아오지 않아서 빈 화면이나 임시 데이터가 표출됨
5. 페이지 렌더링 완료 후 (useEffect 내의 )API 요청 코드가 실행됨
6. API에서 받아온 데이터로 state를 업데이트하고 페이지 re-rendering
7. 페이지 인터렉션 가능해짐

• CSR 특지
  1. 최초 페이지 로딩 시간이 SSR보다 오래 걸림(렌더링에 필요한 리소스와 번들JS파일 다운로드 떄문에)
  2. 페이지 이동 시간은 짧음(최초 접근시에만 번들JS와 정적 리소르를 다운로드 해놔서)
  3. API에서 data를 받아올때까지 빈 화면 표출

SSG ( Static Site Generation ) 

• SSG는 프로젝트 빌드 시에 페이지를 사전 렌더링 하는 방식
• Next.js , Gatsby, Nuxt.js 에서 제공
• 미리 만들어둔 페이지를 client에게 제공하므로 렌더링 속도가 매우 빠름
• SSR과 마찬가지로 완성된 페이지를 client에게 건네주므로 SEO에도 친화적
• 블로그 등 정적인 데이터를 보여주는 정보성 사이트에 적합

 

참고 : https://guiyomi.tistory.com/125