[Web] CSR vs SSR

💭 예상 질문

• CSR과 SSR에 대해 설명하고, 차이에 대해 설명해주세요.
• CSR과 SSR의 장단점을 비교하여 설명해주세요.
• SSR을 사용하면 첫 페이지 로딩 시간이 왜 빠른가요?
  • CSR에서 첫 화면이 보이기까지 시간이 걸리는 이유는 무엇인가요?
• CSR과 SSR 환경에서 페이지가 처음 로딩되는 과정을 비교하여 설명해주세요.

웹 애플리케이션 렌더링 방식은 크게 2가지로 구분할 수 있습니다.

CSR : 클라이언트 사이드 렌더링으로, 빈 HTML 파일에 자바스크립트를 실행하여 동적으로 화면을 그리는 방식

SSR : 서버 사이드 렌더링으로, 서버에서 화면을 그리기 위해 필요한 데이터까지 포함한 완전한 HTML을 전달받아 화면을 그리는 방식

*화면에 그려지는 속도 : 내용 없는 CSR > 내용 있는 SSR > 내용 있는 CSR

✅ CSR (Client Side Rendering)

브라우저에서 대부분의 렌더링 작업을 처리하는 방식

1. 사용자가 접속하면 브라우저가 웹서버에 빈 HTML을 요청한다.

2. HTML을 파싱하면서 필요한 CSS와 JS 파일도 웹서버에 요청한다.

3. 브라우저가 자바스크립트를 실행하면서 API 서버에 필요한 데이터를 요청한다.

4. API 서버는 브라우저에 데이터를 JSON 형태로 응답한다.

5. 브라우저는 API 서버에서 받은 데이터로 빈 HTML을 동적으로 채우고 화면을 렌더링한다.

✅ SSR (Server Side Rendering)

서버에서 미리 HTML을 렌더링하여 브라우저에 전달하는 방식

1. 사용자가 접속하면 브라우저가 SSR 서버에 HTML을 요청한다.

2. SSR 서버는 HTML을 렌더링하기 위해 필요한 데이터를 API 서버에 요청한다.

3. SSR 서버는 API 서버에서 가져온 데이터로 완전한 HTML을 생성하여 브라우저에게 전달한다.

4. 브라우저는 SSR 서버에게 완전한 HTML을 받아 화면을 렌더링한다.

5. HTML을 파싱하면서 자바스크립트 파일을 다운받아 상호작용 이벤트들이 활성화된다.

✅ CSR vs SSR

아래 영상은 같은 프로젝트를 CSR과 SSR 방식으로 구현하고 네트워크를 느린 4G로 설정하여 기록한 영상이다.

CSR은 빈 HTML에 자바스크립트로 화면을 그리므로, 데이터가 불러오면서 레이아웃 시프트가 발생하는 것을 확인할 수 있다.

반면 SSR은 완전한 HTML을 불러오므로, 레이아웃 시프트가 비교적 발생하지 않는 것을 확인할 수 있다.

CSR(느린 4G)	SSR(느린 4G)

🚨 SSR 방식은 css까지 적용되어서 HTML이 불러와지는 것인가?

No 🔥 ➡️ 처음 랜더트리를 그릴 때 스타일이 모두 계산되어 완성된 화면을 그린다

레이아웃 시프트도 발생하지 않고 완전한 HTML이라고 하니까 css가 적용되어서 온다고 오해할 수 있다.

하지만 SSR 프로젝트의 네트워크탭을 보면 css 파일을 요청하기 때문에 적용되어서 오는 건 아닐 것이다.

따라서, HTML에서 link 태그로 외부 스타일시트를 불러오고 CSSOM이 생성된 후 렌더 트리를 그리기 때문에 CSS가 적용된 완성된 화면을 그린다고 이해할 수 있다.

🚨 css-in-js 을 사용하면 SSR에서도 스타일이 나중에 적용될 수 밖에 없는가?

No 🔥 ➡️ 서버에서 HTML에 스타일을 주입하여 전달할 수 있다

css-in-js는 런타임에 자바스크립트로 스타일을 생성하기 때문에, CSR에서는 자바스크립트가 실행된 후 스타일이 적용된다.

그래서 SSR에서도 css-in-js를 사용하면 스타일이 나중에 적용될텐데, 이를 HTML에 스타일을 미리 주입하는 방식으로 해결할 수 있다.

1. styled-components, emotion 등에서 제공하는 SSR을 지원하는 기능으로 서버에서 미리 스타일을 생성한다.

2. 서버에서 미리 계산한 스타일을 style 태그로 HTML과 함께 브라우저로 전달할 수 있다.

3. 따라서 자바스크립트가 실행되기 전에 스타일이 적용된다.