SPA / SSR / CSR

SPA 싱글 페이지 어플리케이션

한 페이지에서 필요한 부분만 받아와서 업데이트하는 형식.
여러개의 html파일로 이루어진 것이 아니라 하나의 html만이 존재하고
index.js에 여러가지 컴포넌트나 템플릿을 만들어불러오는 형식
구글 맵이 SPA으로 이루어져있다.
리액트, 뷰, 앵글러 SPA을 구현하며 SPA는 기본적으로 CSR이다.

CSR 클라이언트 사이드 렌더링

브라우저 사용자(클라이언트) 측에서 렌더링 되는 것.
텅빈

에 필요한 부분들을 불러와서 채워넣는 방식이다.
리액트와 뷰가 이런 형식이다.

특징

• 다운받은 html안이 텅 비어있고 추후에 필요한 data들을 요청해서 넣어서 보여주는 방식이라 사용자가 화면을 보기까지의 시간이 걸린다.
• SEO가 용이하지 않다. 일단 받게 되는 html이 비어있기 떄문에 내용물이 어떤 것들이 들어있는지 검색엔진이 파악하기 어려워 검색엔진이 CSR로 작성된 웹페이지를 분석하는데 어려움이 있기 때문.
• 사용자가 화면을 봄과 동시에 동적인 동작이 가능하다. 빠른 인터렉션 가능
• 클라이언트 쪽에서 렌더링하므로 보안성이 약하다.

SSR 서버사이드 렌더링

서버에서 html과 필요한 data파일들을 렌더링해서 클라이언트에게 던져주는 방식

특징

• 첫번째 페이지 로딩이 빠르다. 내용을 서버에서 채워서 보내주기 떄문에 처음부터 완전한 페이지를 볼 수 있다.
• SEO가 용이하다. 서버에서 내용을 다 채워서 주기 때문에 검색엔진이 페이지 내부의 데이터를 미리 분석할 수 있다.
• 서버에서 처리해서 던져주는 것이므로 서버에 과부하가 올 수 있다.
• 사용자가 빠르게 화면을 볼 수 있지만 동적 데이터처리는 느려서 사용자가 화면을 보는 시간과 인터렉션 사이에 공백이 존재한다.
• 서버에서 렌더링 되기 때문에 보안성이 높다.