SSR(Server-side rendering) vs CSR(Client-side rendering)

우리가 브라우저를 통해 웹페이지를 볼때 브라우저는 2가지 방식으로 렌더링해 페이지를 보여줌

1. Server-side Rendering?

"꽉찬 html 파일"을 서버가 클라이언트에게 보냄

2. Client-side Rendering?

"구멍난 html과 Data"를 서버가 클라이언트에게 보내면 JS가 브라우저를 통해 Data Binding하여 보여줌

<Next를 사용하는 경우라고 생각하면 됨>

1-1. SSR은 browser에서 HTML rendering 부터 함(이때부터 볼 수 있음)
1-2. 그리고 browser가 JS를 다운받음
1-3. 그러면 browser가 React를 실행시킴
1-4. 이때부터 페이지 Interactable함

<React를 사용하는 경우라고 생각하면 됨>

2-1. CSR은 처음에 아예 Data가 없음. browser에서 rendering을 하게됨
2-2. browser가 JS다운받고
2-3. 그다음 React를 돌림 => 이때 Data binding함
2-4. 이때부터 페이지 볼 수 있고, Interactable함

따라서

• CSR= 처음에 Data가 아예 없기때문에 검색엔진봇이 크롤링할 수 없음 => SEO 어려움
• 반면 SSR= 브라우저가 JS 다운받기전에 HTML 다운로드 받아서 화면을 일단 볼 수 있음 => 검색엔진봇이 크롤링 가능.