새로운 마음으로 쓰는 파이썬 관련 첫 주제가 CSR, SSR 이라니?
사실 이 글의 핵심 주제는 Python 기반의 크롤링이다.
관련된 서브 개념들부터 정리하는 게, 실제로 실무에서 크롤링하다 마주친 오류를 이해하고 해결하는 데
도움이 될 것 같다.
CSR vs SSR
크롤링이든 웹 개발이든 하다 보면 꼭 마주치는 개념이 CSR(Client Side Rendering)과 SSR(Server Side Rendering)이다.
웹 화면은 어떻게 만들어질까부터 생각하자.
브라우저에서 우리가 보는 화면은 보통 이렇게 구성된다.
- HTML: 화면의 뼈대(틀)
- CSS: 화면을 꾸미는 디자인
- JavaScript(JS): 화면을 움직이게 하는 두뇌 역할 (이벤트 처리, 서버 통신, DOM 제어 등)
즉, HTML은 집의 구조, CSS는 인테리어, JS는 집 안에서 일어나는 동작과 자동화라고 보면 된다.
CSR (Client Side Rendering)
CSR은 클라이언트, 즉 브라우저가 렌더링을 담당하는 방식이다.
초기 한 번 서버에서 자바스크립트 번들을 받아 브라우저가 스스로 화면을 그려 나간다.
이론만 보면 딱딱하고 헷갈리기 쉬우니, 음식과 배달 비유로 쉽게 정리한다. 내가 생각해도 괜찮은 비유다.
내가 요리하는 경우가 CSR인데,
1. 마트에 간다 → 서버에서 필요한 재료(=JS 번들)를 최초 한 번 받아온다.
2. 집 냉장고에 재료를 넣어둔다 → JS 번들이 브라우저에 저장된다.
3. 필요할 때 재료를 꺼낸다 → 브라우저가 필요한 시점마다 코드를 실행해 화면을 그린다.
4. 내가 직접 요리한다 → 브라우저가 화면을 렌더링한다.
즉, 브라우저가 모든 요리를 책임지는 구조다.
SSR (Server Side Rendering)
SSR은 서버에서 이미 완성된 화면을 만들어 클라이언트에 전달하는 방식이다.
사용자는 브라우저에서 거의 렌더링 작업을 하지 않는다.
배달 음식을 시키는 경우가 SSR이라고 보면 된다.
1. 주방(서버)에서 요리를 한다 → 서버가 HTML을 미리 렌더링한다.
2. 식재료 창고(DB)에서 재료를 가져온다 → 서버가 DB에서 데이터를 받아 화면을 만든다.
3. 배달 기사(네트워크 전송)가 완성된 음식을 가져온다 → 완성된 HTML이 브라우저에 전달된다.
4. 나는 받아서 바로 먹기만 한다 → 브라우저가 화면을 바로 보여준다.
즉, 서버에서 요리를 다 해주고 사용자는 완성품을 받는 구조다.