SSR (Server Side Rendering)

• SPA가 대두되기 전 주로 사용

1. 브라우저 요청시 서버에서 데이터 fetch 한다.
2. 프론트 서버에서는 fetch된 데이터와 함께 html + css 된 결과물을 브라우저에 넘겨준다.
3. 브라우저는 결과물을 그린다.

• 새로운 페이지를 넘어가더라도 그에 해당하는 html 파일을 만들기 위해 위 작업 반복
• 장점: 전체가 한 번에 보인다.
• 단점: 로딩 속도가 길다. late interaction.

CSR (Client Side Rendering)

• React, Angular, Vue

1. 브라우저 요청 ①

   1-1. 데이터를 포함하지 않은 js, html, css, img 등을 프론트 서버에서 처리

   1-2. 화면은 그려주는데 데이터가 없으므로 로딩창을 먼저 보여줌

2. 브라우저 요청 ②

   2-1. 백엔드에 데이터를 요청하면 바로 브라우저로 돌려줌

3. 로딩창을 없애고 데이터를 보여줌

• 화면은 최초 한 번 받아오고, 데이터만 바꾼다.
• 장점: 로딩 속도가 짧다. fast interaction.
• 단점: 처음엔 모든 데이터를 받아오므로 초기 구동 속도 느리다. 검색 엔진 최적화 문제 (로딩창밖에 없다고 생각하여 검색 순위가 밀릴 수 있음)

SSR + code splitting

• 검색 엔진일 때만 전통적인 SSR 방식 사용
• 일반 유저일 때는 CSR 사용
  
  
  
  

References: 웹 렌더링