CSR / SSR

CSR (Client-side rendering) - 자바스크립트에 데이터를 포함해서 보낸 후, 클라이언트 쪽에서 HTML을 완성하는 방법, 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그림

장점:
네이티브 앱과 비슷한 빠른 인터렉션 구현 가능 (서버 트래픽 감소)
단점:
첫 페이지 로딩 속도가 SSR에 비해 다소 느림 ( 첫 요청 시에 전체 페이지에 대한 데이터를 받기 때문)
검색엔진 최적화에 대한 추가 보완 작업 필요

SSR (Server-side rendering) - 서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법, 클라이언트가 서버에 매번 데이터를 요청하여 서버에서 처리함

장점:
첫 페이지 로딩 속도가 CSR에 비해 빠름 (첫 페이지에 해당하는 데이터만 브라우저에 전달하기 때문에)
검색엔진 최적화가 가능함
단점:
초기 로딩 이후 페이지 이동 시 속도가 다소 느림 (이동 시마다 클라이언트가 서버에 필요한 데이터를 요청하고 서버가 응답해주는 방식이기 때문에)

복합적인 방법 - 클라이언트 쪽에서 Ajax 요청을 보내서 서버에서 데이터를 받아와 HTML을 완성하는 방법