쉽게 알아보는 CSR과 SSR

CSR과 SSR은 뭘까요?

먼저 이 두 개념은 누가 HTML을 완성할 것인가? 라는 질문의 대답이라고 할 수 있습니다. 즉, 이 두 개념은 브라우저에서 렌더링하기 위해 필요한 뼈대를 완성하는 방식입니다.

• 브라우저(클라이언트)에서 완성할게! ➡ CSR
• 서버에서 완성해서 보낼게! ➡ SSR

+ 브라우저 렌더링 과정이 궁금하다면?
쉽게 보는 렌더링 과정

CSR (Client Side Rendering)

서버로부터 빈 HTML파일 + DOM을 추가하는 JS 파일을 받아, 브라우저가 동적으로 요소들을 추가하여 화면을 완성하는 방식입니다.

일반적으로 별도의 클라이언트 서버 없이 리액트 등을 사용하여 개발했다면 CSR 방식으로 렌더링하고 있을 확률이 큽니다.

SSR (Server Side Rendering)

서버에서 HTML을 완성해서 보내주면, 브라우저가 이를 그대로 화면에 그리는 방식입니다.

서버에서 이미 HTML을 완성하여 보내주기 때문에 초기 로딩 속도가 빠르다는 장점이 있습니다. 또한 이미 HTML이 채워져있기 때문에 SEO에 유리하다는 장점이 있습니다.

그러나 초기 렌더링에서 보여주는 화면은 신기루 같은 것입니다. 그저 화면만 보일 뿐 어떠한 상호작용(클릭을 하면 어떤 일이 일어난다)도 불가능합니다. 상호작용과 관련한 로직은 여전히 브라우저에서 JS 파일을 파싱하여 넣어주기 때문입니다.

즉, 초기 렌더링이 빠르더라도 상호작용은 그만큼 빨리 가능해지지 않을 수도 있습니다. (그래도 개인적으로 유저가 로딩을 오래 보는 것 보다는 콘텐츠를 보고 있는 것이 UX적으로 좋다고 생각합니다. )

유니버셜 렌더링 (Universal rendering)

유니버셜 렌더링이란 앞서 설명한 CSR 과 SSR를 혼합하여 사용하는 방식입니다.

마치며

위 개념들은 렌더링의 방식일 뿐 언제나 더 좋은 방법은 없습니다.
각자의 상황에 맞춰 더 좋은 방식을 채택해봅시다!

---

💌 함께 읽어보길 추천드려요

• 쉽게 보는 렌더링 과정