🤼 CSR vs SSR

CSR - Client Side Rendering

클라이언트에서 웹 페이지를 렌더링한다.

클라이언트가 서버에게 요청을 보내고 HTML 파일과 JS 파일을 응답 받는다. JS 파일이 실행되면 클라이언트에서 렌더링된 페이지로 보여준다. 필요한 데이터가 있다면 서버에게 API 요청을 보내고 그동안 placeholder를 보여준다. API 응답 받은 데이터를 웹 페이지에 보여준다. 이떄부터 사용자와 상호작용이 가능하다.

SSR - Server Side Rendering

서버에서 웹 페이지를 렌더링한다.

클라이언트가 서버에게 요청을 보내면 서버는 즉시 렌더링이 가능한 HTML 파일을 만들고 전송한다. 클라이언트는 렌더링이 된 파일을 받았기 때문에 웹 페이지를 바로 볼 수 있지만 자바스크립트가 읽히기 전까진 상호작용이 불가능하다. 자바스크립트를 모두 받은 후에 사용자와 상호작용이 가능하다.

차이점

CSR

• 첫 페이지 로딩할 때 HTML 파일, CSS 파일, JS 파일 등 렌더링에 필요한 모든 파일들을 한 번에 불러온다.
• 다른 경로로 이동할 경우 이미 첫 페이지 로딩할 때 받아왔기 때문에 서버에게 요청을 보내지 않고 브라우저에서 해결한다. (API 요청 제외)
• 빠른 라우팅이 가능하다.

SSR

• 첫 페이지 로딩할 때 HTML 파일과 JS 파일만 불러온다. CSR보다 평균적으로 속도가 더 빠르다.
• 다른 경로로 이동할 경우 서버는 매번 렌더링이 가능한 HTML 파일을 만들고 JS 파일과 함께 전송하는 작업을 반복한다.

예시

CSR 예시

• SEO가 아닌 이상 대부분 CSR을 사용
• 사용자와 상호작용이 많은 경우
• 네트워크가 빠르거나 서버의 성능이 좋지 않은 경우
• 메인 스크립트가 가벼운 경우

SSR 예시

• SEO(검색 엔진 최적화)가 우선순위인 경우
• 최초 로딩이 빠르게 필요한 경우
• 사용자와 상호작용이 적은 경우
• 네트워크가 느린 경우