SSR : server side rendering
CSR : client side rengering
이 두가지의 차이점을 아는 것이 매우 중요하다 !!
1) SSR
: 웹 페이지를 서버에서 렌더링한다.
: 웹 페이지 내용에 데이터베이스의 데이터가 필요한 경우에는 서버가 그 데이터를 불러온 다음, 웹 페이지를 렌더링된 페이지로 변환 후에 브라우저에 응답으로 보낸다.
: 웹 페이지에 있던 사용자가 브라우저의 다른 경로로 이동하면? -> 브라우저가 다른 경로로 이동할 때마다 서버는 같은 작업을 다시 수행한다.
언제 SSR을 사용할까?
-SEO(search engine optimization)이 우선순위 일때 사용
-첫 화면의 빠른 렌더링이 필요한 경우에 사용 (단일 파일의 용량이 작기 때문에 유리)
-웹 페이지가 사용자와의 상호작용이 적은 경우에 사용
2) CSR
: 웹 페이지를 클라이언트에서 렌더링한다. (대표적인 클라이언트는 '웹 브라우저')
: 브라우저가 서버에 요청을 보내면, 서버는 웹 페이지의 골격이 될 단일 페이지로 응답한다. 이때, 웹페이지랑 javascripe 파일도 함께 보낸다. 클라이언트는 이 모든 파일을 브라우저의 웹 페이지를 렌더링 페이지로 바꾼다.
: 웹 페이지 내용에 데이터베이스의 데이터가 필요한 경우에는 브라우저가 데이터베이스에서 저장된 데이터를 가져와서 웹 페이지에 렌더링을 한다. (이를 위해 Fetch와 같은 API가 사용된다.)
: 웹 페이지에 있던 사용자가 브라우저의 다른 경로로 이동하면? -> SSR과 다르게 서버가 웹 페이지를 다시 보내지는 않는다. 브라우저가 요청한 경로에 따라 페이지를 렌더링한다. 이때의 웹 페이지 파일은 맨 처음 서버로부터 전달받은 웹페이지 파일과 동일하다.
언제 CSR을 사용할까?
-SEO가 우선순위가 아닐 때 사용
-사이트에 풍부한 상호작용이 있는 경우에 사용(빠른 라우팅으로 강력한 사용자 경험 제공)
-웹 애플리케이션을 제작하는 경우에 사용(빠른 동적 렌더링)
예시)
네이버 블로그는 SSR 방식을 도입했다.
1) 검색엔진 최적화를 위해 선택
2) 다른 웹 사이트에 비해 사용자와의 상호작용이 많지 않다.
: 네이버 블로그의 네트워크 탭을 보면, html 파일에 내용이 똑같이 담겨 있어서 구글, 네이버 같은 검색엔진 크롤러가 html에 접근하여 쉽게 내용 가져간다.
뉴욕 타임즈는 SSR 방식을 도입했다.
단점: 사용자가 클릭할 때마다 전체 웹사이트를 다시 서버에서 받아온다 -> 서버 과부하 이슈
1) 검색 엔진 최적화를 위해 선택
2) 초기 로딩 속도가 빠르기 때문에 구독자가 신문기사를 빨리 읽을 수 있다.
: todayspaper 라는 완성된 html 파일을 받아와서 렌더링 한다. 그 html 파일 안에 해당 내용이 그대로 담겨있는 상태라, 검색엔진 크롤러가 내용 수집 쉽다.
아고다는 CSR을 사용한다.(그 외 많은 예약 사이트들도)
1) 서버가 클라이언트에 필요한 데이터만 넘겨주기 때문에 부담이 적다.
2) SPA 를 기반으로 화면의 일부만 받아온 데이터로 변경해 주기 때문에 빠른 렌더링으로 사용자 경험에 유리하다.
3) HTML이 빈 페이지로 시작하기 때문에 검색엔진 최적화에 불리하고, 구글에서 자바스크립트 코드를 분석, 실행시켜 크롤링을 하고 있다.
틀린퀴즈
B. CSR에서 서버는 API응답을 하지 않는다.
-> CSR에서 서버는 주로 API응답을 담당한다.
D. 경로가 변경될 때마다 새로운 정적파일을 요청하는 것은 SSR의 특징이다.
