CSR 과 SSR
브라우저가 웹페이지의 화면을 표시해 주는 것을 ‘렌더링’ 작업이라 말한다.
렌더링을 처리하는 방식을 나눠 CSR방식과 SSR 방식으로 나뉜다.
클라이언트 사이드 렌더링 (CSR )
웹페이지를 서버에서 받아오고, 클라이언트 측에서 동적으로 렌더링 하는 방식
예시로 React,Vue, Angular 와 같은 프레임워크에서 사용한다.
동작 과정
- 클라이언트가 서버로부터 HTML,CSS,Javascript 등 정적 파일을 받아온다.
- 클라이언트에서 웹페이지를 동적으로 생성하고 데이터를 불러온다
- 렌더링된 웹 페이지를 볼 수 있다.
장점:
사용자 경험이 향성된다. 페이지 로딩 후에 필요한 데이터만을 가져와서 동적으로 렌더링 하기때문에, 페이지의 전체적인 로딩 속도가 빨라진다.
단점:
초기 로딩시 클라이언트에게 많은 작업량이들어와 초기 로딩속도가 느려질 수 있다.
CSR방식을 사용하게도면 서버의 역할은 API 엔드포인트를 제공하는 것이기 때문에 프론트와 백엔드 역할을 분리하여 개발 할 수 있다.
서버 사이드 렌더링 (SSR)
서버 사이드 렌더링 방식은 렌더링을 서버에서 처리하여 완성된 페이지를 클라이언트에게 전송하는 방식을 말한다.
예를 들어 thymeleaf나 JSP와 같이 사용하는 것을 ‘SSR’ 방식이라 한다.
동작 과정
- 클라이언트가 서버에게 페이지 요청을 한다.
- 서버에서 요청을 처리하고, 데이터를 가져와서 완성된 HTML을 생성한다.
- 클라이언트에게 HTML페이지를 전송한다.
장점:
서버에서 데이터를 처리하기때문에 초기 로딩 속도가 빠르다.
단점:
초기 로딩이후 페이지 이동시 속도가 느리다.
- 페이지를 이동할때마다 서버에서 데이터를 처리하여 클라이언트로 전송하기 때문에 속도가 느리다.