CSR vs SSR

• 어제 노트북이 고장나서 수리를 맡기는 바람에 오늘 업로드 하는데, 시간이 나면 오늘 2개까지 업로드 할 생각입니다.

---

📚 개념

웹 페이지의 렌더링 방식은 렌더링 과정을 수행하는 위치에 따라 CSR과 SSR로 나뉩니다.

🎁 CSR (Client Side Rendering)

• SSR과 다르게 렌더링이 클라이언트 쪽에서 일어납니다. 즉 서버는 요청을 받으면 클라이언트에 html과 js를 보내주며, 클라이언트는 그것들을 받아 렌더링을 시작하죠.

• CSR은 무엇보다 클라이언트 단에서 렌더링을 수행하고, 사용자가 최초로 웹 사이트에 접근할 경우, 웹 사이트에서 제공하는 모든 리소스를 클라이언트에 다운로드하고 CSR로 페이지 전환을 처리합니다.

🎁 SSR (Server Side Rendering)

• 말 그대로 서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식입니다.

• SSR은 사용자가 웹 페이지에 접속하면 서버로 해당 페이지에 대한 요청이 이루어지고, 서버에서 필요한 html,css 등등을 이용해서 페이지를 렌더링한 후 클라이언트로 반환합니다.

---

📚 CSR과 SSR을 접하는 경우

• 웹 개발자는 웹 앱 개발에 앞서 적합한 렌더링 방식을 선택합니다. 그 과정에서 CSR과 SSR을 자주 접하게 됩니다. 제공하는 웹 앱의 특성에 따라 적합한 렌더링 방식으로 개발되어야 하기에 웹 페이지 렌더링 방식인 CSR과 SSR을 정확히 이해해야합니다. 여담으로 프론트 개발자들이 사용하는 리액트는 CSR, next.js은 SSR이 가능합니다.

---

📚 두 방식의 차이점

🎁 첫 페이지 로딩 속도

• CSR은 기본적인 html,css와 모든 스크립트들을 받아와서 페이지를 로딩하고, 이후에 필요한 데이터들은 비동기적으로 요청하고 받아오기 때문에 초기 로딩속도가 빠릅니다. 하지만 SSR은 필요한 부분의 html과 스크립트만 가져오기에 SSR이 더 빠릅니다.

🎁 나머지 로딩 속도

• CSR은 이미 첫 페이지를 로딩할 경우에 나머지 부분까지 받아왔기에 SSR보다 CSR 과정이 더 빠릅니다.

🎁 SEO (검색 엔진 최적화)

• CSR은 초기에 브라우저에게 html,css,js 파일을 전송합니다. 페이지의 실제 콘텐츠는 js를 사용하여 동적으로 클라이언트에서 생성되기에, 검색 엔진은 초기에 받아온 html에서는 페이지의 전체 콘텐츠를 파악하기 어렵습니다.

• 반면 SSR은 서버에서 완전한 html페이지를 생성하여 브라우저로 전송합니다. 검색 엔진은 초기에 html을 받아와서 페이지의 콘텐츠를 빠르게 이해하고 인덱싱 가능하죠.
  따라서 SEO는 SSR이 더 유리합니다.