CSR vs SSR

CSR (Client-Side Rendering, 클라이언트 사이드 렌더링)

• 서버에서 HTML, CSS, JavaScript 등의 파일을 받 브라우저(클라이언트)에서 JavaScript 가 실행되며 전체 화면을 렌더링 하는 방법
• 대표적으로 React,Vue 등의 프레임워크가 이 방식을 사용함

장점

• 초기 로딩 이후 페이지 전환이 빠름
• 동적 페이지에 유리함
• 서버 부담 감소

단점

• 초기 로딩 속도가 느림
• 검색 엔진 최적화가 어려움 : 초기에 빈 html을 받기 때문에 검색 엔진이 콘텐츠를 파악하기 어려

SSR (Server-Side Rendering, 서버 사이드 렌더링)

• 사용자가 요청할 때마다 서버에서 HTML을 완전히 생성해서 브라우저에 전달하면 브라우저는 렌더링
• 대표적으로 JSP , PHP, Next.js 등이 있다.

장점

• 초기 렌더링 속도가 빠름
• 검색 엔진에 최적화

단점

• 페이지 이동 시마다 서버에 요청하기에 느림
• 서버 부담 증가