CSR(Client Side Rendering)
클리이언트 쪽에서 렌더링이 일어난다.
초기 로딩 시에, html과 로직이 담겨있는 JS를 다운로드 한다.
그리고 빈 html에 JS를 통해 DOM을 동적으로 생성하여 그려낸다.
실행 순서 : 유저가 웹사이트에 요청을 보냄 -> CDN이 html/js 접근 가능한 링크를 클라이언트에 보냄 -> JS가 완료되면 실행 -> 데이터를 위한 API가 호출됨 -> 받아온 데이터 노출
장점:
JS를 통해 동적으로 DOM을 그려내기 때문에, 원하는 곳만 부분적으로 업데이트가 가능하다.
단점:
렌더링이 되고 있는 도중엔 로딩하는 화면을 기다려야함
HTML 파일 하나만 받아오기 때문에, SEO에 취약하다.
SSR(Server Side Rendering)
서버에서 랜더링 준비가 완료되어 클라이언트에게 즉시 랜더링이 가능한 html을 전달한다.
랜더링이 준비가 되어있기 때문에, 별도의 로딩없이 즉시 랜더링이 가능하다.
잠점:
요청한 페이지의 html을 다운받아 뿌려주기 때문에 초기 진입시 로딩이 빠르다.
개별 페이지를 넘겨받아 렌더링해서 SEO 최적화가 용이하다.
단점:
페이지 이동할 때 마다 새 html을 렌더링 해야해서 깜빡임이 있다.
초기 진입을 빠르지만, CSR보다 느린 편이다.