SSR vs CSR

SSR

💡 Server Side Rendering
💡 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링

브라우저가 서버의 URI로 GET 요청
서버는 데이터베이스의 데이터를 불러옴
웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답

CSR

💡 Client Side Rendering

브라우저가 서버의 URI로 GET 요청
서버는 웹 페이지의 골격인 단일 페이지(Single Page), JavaScript를 클라이언트에 보냄
클라이언트는 전달받은 웹 페이지,JavaScript 파일을 브라우저의 웹 페이지로 렌더링

차이점

💡 SSR은 서버에서 페이지를 렌더링, CSR은 브라우저(클라이언트)에서 페이지를 렌더링
💡 CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리(서버가 웹 페이지를 다시 보내지 않음)

장단점

📗 SSR
-SEO(Search Engine Optimization)에 유리
-첫 화면 렌더링이 빠르게 필요한 경우(단일 파일에 용량이 작음)
-사용자와 상호작용이 적은 경우

네이버 블로그, 뉴스 웹 사이트 등

• 검색기능이 중요하고 초기 로딩이 빠른 장점을 가진 SSR

📗 CSR
-사용자와 풍부한 상호작용에 유리
-웹 어플리케이션의 경우 빠른 동적 렌더링으로 더 나은 사용자 경험 제공 가능

예약 사이트
빠른 렌더링으로 사용자 경험(User Experience)에 유리