Web_SSR과 CSR

SSR(Server Side Rendering)

클라이언트가 데이터를 요청하면 브라우저 > 프론트 서버 > 백 서버 > 데이터베이스를 거쳐서 데이터베이스에서 데이터를 가져온 후 브라우저에 그려지는 방식.

서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달하므로, 불필요한 부분까지 모두 다시 렌더링해야 한다는 단점을 가진다.

CSR(Client Side Rendering)

데이터를 제외한 화면을 그리는 코드들은 프론트 서버에, 데이터는 따로 백 서버에 요청하여 받아오는 방식.

서버 부하가 덜하다는 장점이 있는 반면, 번들된 JS 파일의 다운로드로 인해 초기 로딩이 길고 SSR에 비해 SEO에 약하다는 단점이 있다.

Next.js

첫 페이지는 SSR 방식으로 백 서버에서 렌더링해서 데이터가 채워진 html을 받아오고, 그 다음 페이지부터는 CSR 방식으로 필요한 데이터 부분만 갱신하는 방식.

---

여담

• 예전에 프로젝트 할 때 한번 찾아본 내용이었는데, 오늘 본 면접에서 잠깐 언급된 김에 다시 정리해보았다.

---

참고

👩‍💻 SSR vs CSR 비교 설명, Next.js가 탄생하게 된 이유