TIL. 43 CSR, SSR

💡 SPA (Single Page Application)

• 말 그대로 하나의 페이지로 이루어진 웹 애플리케이션으로, 서버에서 최초에만 페이지를 받아온 후 이후에는 동적으로 구성해 새로운 페이지를 받아오지 않는다.(데이터를 수정, 조회할 때 새로 고침되지 않음)
• 쉽게 말해, 처음 불러왔던 페이지의 내용만 변경하는 방식이고, 페이지 이동간 서버에 요청을 하지 않는다.
• 대표적으로 React, Vue, Angular가 있다.
• 페이지 이동 시 Javascript 내의 특정 함수를 타서 <div id="root" />의 내용을 교체한다.
• 초기 렌더링 후 데이터만 받아오므로 상대적으로 서버 요청이 적다.
• Virtual DOM 사용
• React의 경우 CRA을 통해 webpack, babel 같은 복잡한 세팅을 거치지 않아도 된다.

💡 MPA (Multiple Page Application)

• SPA와 반대되는 개념으로, 페이지 자체가 여러개로 진행되는 웹 애플리케이션을 말한다.
• 각 페이지를 클릭하면 서버에 요청만 보내고, 서버에서 응답하면 그 때 브라우저에서 보여준다.
  

💡 CSR (Client Side Rendering)

• 웹 페이지 렌더링이 클라이언트(브라우저) 측에서 일어나는 것을 의미한다.
• 클라이언트는 최초 요청에서 HTML, Javascript, CSS 확장자 파일을 차례대로 다운로드하며 최초 불러온 페이지의 내용은 비어있다.(html, body 태그만 존재)
• Javascript 파일이 다운로드된 다음, 해당 파일이 DOM을 HTML 위에 그리기 시작한다.
• 최초 호출 때만 페이지를 받아오고 이후 화면에서 일어나는 변화는 데이터만 요청한다.(ex: json)
• SEO와 관련이 적은 어드민 페이지를 개발할 때 주로 사용한다.

💡 SSR(Server Side Rendering)

• 페이지를 서버 단계에서 구성 후 사용자에게 보여주는 것을 말한다.
• CSR에 비해 페이지 속도는 늦어질 수있지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라져 UX 측면에서 유리하다.
• 첫 페이지에 구성이 불필요한 파일은 받아오지 않고, 필요한 정적인 부분만 처리하고 동적인 부분은 필요한 부분만 로드한다.
• CSR의 단점인 '첫 페이지 깡통 상태'를 극복할 수 있다.
• 주의할점은 페이지를 잘못 구성할 시 CSR에 비해 서버 부하가 커지거나 첫 로딩이 매우 느리다.
• 주로 SEO가 중요한 커머스를 개발할 때 주로 사용한다.

💡 SEO (Search Engine Optimization)

• 웹에 검색 했을 때, 내가 만든 사이트가 잘 걸리도록 하는 것이며 검색 엔진 최적화라고 한다.

• 쉽게 말해, 내가 만든 사이트가 좀 더 상위의 랭크를 받을 수 있다고 어필하는 것이다.

• CSR의 경우 최초에는 페이지에 내용이 없기 때문에 검색 노출이 어렵다.

• SSR의 경우 페이지를 서버에서 구성한 후 보여주는 방식이기 때문에, 바로 조사 후 검색 노출이 된다.

결론적으로 서비스의 목적에 따라 CSR, SSR을 적합하게 사용하는 것이 가장 좋다.