💡 CSR SSR / SPA MPA / 정적웹 동적웹

KHW·2021년 8월 23일

Javascript 지식쌓기

목록 보기

77/95

🏳 웹사이트 분류

🏴 정적웹

반복이나 변화가 잦지 않은 사이트에 사용한다.
github.io , netlify 혹은 정적웹 생성툴인 Jekylle에서 사용
서버에 추가 정보 요청하는 것도 있다. (fetch같은) => 서버에 데이터 요청이지 DB에 요청이 아니라
ex) 진열된 웹페이지를 들고가는 편의점

🏴 동적웹

디자인 레이아웃은 그대로인데 출력되는 요소가 계속 바뀌는 웹사이트
새로고침할때마다 DB로부터 최신정보를 보여주는 것
ex) 그때그때 요리해주는 식당

🏳 렌더링 방식

🏴 CSR

클라이언트가 웹사이트를 구성하는 방식
컴포넌트 모듈화와 관련 => React, Vue, Angular와 관련
JS에서 존재하는 태그 관련을 가져와야 보이므로 초기 랜더링 속도가 느리다고 느낀다
html에 관련 컨텐츠가 없어 SEO가 안좋다.

🏴 SSR

서버에서 html을 조합해 html 파일 자체를 응답하는 방식
html에 있는 태그들을 보여주면서 JS를 다운받아 동작시키게 하는 형태
미리 태그를 보여주어 초기 랜더링 속도가 빠르다고 느낀다
html에 관련 컨텐츠가 있어 SEO가 좋다

🏳 페이지 구성 방식

🏴 SPA

웹사이트에서 이동할 수 있는 여러 페이지가 있지만 html은 단 하나뿐인 형태
물리적으로 페이지가 바뀐 게 아니라 JS가 dom을 수정해서 페이지가 바뀐 것처럼 보인다
페이지를 이동할 때(사실은 이동한 것처럼 보이는 거지만) 서버 요청이 아예 없다.

🏴 MPA

물리적으로 페이지마다 파일이 각각 존재하는 형태

🏳 주의해야 할 점

SPA는 CSR, MPA는 SSR라고 생각하기 쉬운데 100% 그렇지는 않다.

SPA도 SSR이 될 수 있다. => html과 js가 있는 초기상태는 SSR 형태에서 어떤 동작들이 수행되고 그 후에 CSR을 하면 SPA가 여전히 유지가 된다.

MPA도 CSR이 될 수 있다. => 컴포넌트 모듈로 와서 CSR했는데 a태그 쓰면 여러 페이지로 동작하는 MPA가 되겠지

브라우저 렌더링의 경우 CSR과 SSR 둘다 브라우저에 보이게 해야하므로 전부 발생한다.

SSR은 웹 서버에서 어느정도 완성된 HTML을 제작하여 로딩하는 방식이다. => 브라우저 랜더링이 SSR에도 존재한다.

우리가 기존에 html css js 코딩하는 것은 거의 CSR이다.
서버에서 웬만큼의 HTML을 렌더링하는 Django것이 SSR로 사용하는 것이라 판단된다.

🏳 정리

🏴 SSR은 SPA가 불가능한가? => X

SSR만 가지고 SPA는 구현은 못하나 SSR을 통해 SPA를 구현하고 이후는 CSR을 쓴다면 SPA는 SSR이 가능하는 의미가 성립한다.

🏴 MPA와 SPA는 무엇으로 구분하는가? => 처음 이후 받아오는 대상에따라

MPA와 SPA의 가장 큰 차이는 처음 이후의 서버에서 가져오는 값이 API를 통한 JSON이라면 SPA이고 Index.html과 같다면 MPA이다.

🏴 CSR과 SSR은 무엇으로 구분하는가? => SEO가 낮냐 높냐 => index.html이 텅 비어있냐 이미 쌓여있냐 => 컴포넌트 방식이냐 아니냐

Node.js에서
1) index.html에서 js를 컴포넌트 방식으로 해서 index.html에서는 필요한 태그가 없으면 이는 SEO가 낮은 CSR방식이고
2) index.html에서 js를 index.html 태그가 있을건 다있고 js를 필요한 부분만 추가한 것은 index.html에 필요한 태그가 있으므로 이는 SEO가 높은 SSR방식으로 구분할 수 있다 생각된다.