[Session] How the Web Works? ( MPA, CSR, SPA, SSR)(

Danbi Cho·2020년 5월 4일

Session

목록 보기

5/9

📌 What You Will Learn
✔️SPA가 무엇인지 설명할 수 있다.
✔️ SPA가 어떻게 동작하는지 설명할 수 있다.
✔️ CSR, SSR의 차이점을 설명할 수 있다.
✔️ CSR, SSR의 차이점에서 오는 각각의 장점을 이해한다.
✔️ 웹에서 React.js와 Django가 무슨 역할을 하는지 정확히 이해한다.

SPA(Single Page Application)
CSR(Client Side Rendering)
SSR(Server Side Rendering)

Static Website

정적인 웹사이트
화면에 보이는 컨텐츠 그대로 html 파일에 작성 되어 있고, 서버에 저장된 html 파일 그대로 브라우저에 보이는 것을 말한다.
회사 소개 페이지, 반복이 없는 포트폴리오 페이지, gatsby 블로그 등이 Static website에 적합하다.

Dynamic Website

Static Website와 반대
서버에 저장된 html 파일이 브라우저에 그려지는 것이 아니라, 동적으로 html 파일이 만들어지는 것이다.
요즘 대부분의 웹사이트가 dynamic website이다.
디자인은 그대로지만 접속할 때 마다 데이터가 바뀌는 것을 Dynamic Website라고 할 수 있다.

MPA (Multi Page Application)

브라우저에서 변경사항이 있을 때 서버로 이터를 전달하여 새로운페이지 렌더링을 요청하고 그 데이터를 표시한다.

멀티페이지 애플리케이션의 장점

애플리케이션내에 어디로 갈지에 대한 시각적 맵이 필요한 사용자에게 가장 적절하다.
검색엔진최적화(SEO, Search Engine Optimization)관리에 적절하면서 쉽다.

멀티페이지 애플리케이션의 단점

프론트앤드와 백엔드 개발이 구분되어 있지 않고 결합되어 있다.
개발이 매우 복잡하게 된다. 개발자들은 클라이언트와 서버사이드 모두에 대해 프레임워크들을 사용해야 한다.

CSR (Client Side Rendering)

동적으로 만들어지는 곳이 client side 인지?

클라이언트에서 Javascript를 통해 렌더링 하는 방식
SPA (Single Page Application) 형식의 대부분 프론트엔드 라이브러리(Vue, React 등)가 CSR 방식으로 시작되었다.
우리가 하는 리액트 프로젝트 / 크롤러는 매 페이지를 돌면서 html의 내용만 본다
리액트 SPA는 div 태그가 하나이고 클릭할 때 마다 html 파일을 만들어 사용하기 때문에 검색엔진 최적화가 잘 되지 않는 문제점이 있다.
해결 방법-> SSR로 만들어야 한다.

SPA (Single Page Application)

최초에 한 번 전체 페이지를 다 불러 오고 HTML에 번들링 된 js가 실행되며 페이지를 렌더링 한다.
클라이언트 요청에 따라 응답 데이터만 다시 페이지의 특정 부분에 렌더링 하는 Web Application 개념이다.

SPA의 장점

필요한 부분만 중복 없이 요청한다.
페이지 이동이 자연스럽고 빠르다.
컴포넌트 별로 개발할 수 있기 때문에 개발 생산성을 향상 시킬 수 있다.
다른 플랫폼과 공통으로 사용하는 Backend API를 개발할 수 있다.

SPA의 단점

계속해서 서버에 요청하여 새롭게 만들어진 html을 응답 받기 때문에 서버 비용이 증가하고 사람이 몰릴 때 서버가 다운 될 수 있다.
JS번들링 파일을 한번에 받기 때문에 초기 로딩에 시간이 걸린다.
(code spliting으로 최적화 가능)
동적 metat data 생성 불가능하다. ex) open graph
SEO의 한계 (pre-rendering, SSR)

🤔 CSR방식으로 이루어진 웹사이트에서 SEO(검색 엔진 최적화)의 문제가 생기는 이유?

CSR 방식인 SPA에서는 SPA에서는 View를 생성하는데 자바스크립트 파일이 필요하다.

최초에 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용하기 때문에 실제 HTML 파일 안에 div 태그 하나만 존재 한다.

그렇기 때문에 웹 크롤러가 제대로 데이터를 수집할 수 없게 된다.

SSR (Server Side Rendering)

동적으로 만들어지는 곳이 sever side 인지?

전통적인 웹 어플리케이션 방식, 요청시 마다 서버에서 처리하여 새로고침으로 페이지 응답
점점 브라우저의 이벤트가 많아지고, 사용사자 많아짐에 따라 서버에 부담이 생긴다.

SSR의 장점

위의 SPA가 가지는 단점을 보완하기 위에 SSR의 개념을 도입했다.

초기 페이지의 컨텐츠는 서버사이드에서 생성하므로 SEO, 크롤링의 문제를 해결 할 수 있다.

SSR의 단점

페이지 이동시 새로고침 및 중복된 로딩이 있을 수 있다.
서버 렌더링 부하 (CPU)
다른 플랫폼과 공유하는 Backend API 한계가 있다.
개발/배포 환경이 기존 CSR 방식보다는 어려울 수 있다.

🔖 단점을 보완하기 위해서
로그인 해서 들어가야 하는 페이지는 CRA으로 만들어야 하고 next.js 서버 사이드 렌더링이 가능한 리액트를 사용하면 된다.

SEO (Search Engine Optimization)

검색 엔진 최적화
웹 페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성하여 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다.
네이버와 구글의 검색 엔진이 자료를 수집하고 순위를 매기는 기준이 다르다. 크롤링을 하여 웹페이지를 방문하여 모든 링크를 찾은 다음, 이 링크를 목록화 한다.
SEO 검색엔진최적화 사이트를 만들기만 해서 검색 엔진에 노출이 되는 것이 아니다.

🤔 프론트엔드 개발자가 html 구조를 잘 짜야 하는 이유

HTML 구조를 잘 짜고 검색도 잘 되도록 만들어야 하기 때문이다.

키워드 검색과 웹페이지에 담긴 텍스트 비교, 반복성, 서체크기, 대문자 등
<head>에 페이지 정보를 잘 작성한다.

리액트 프로젝트에서 public 폴더 - index.html을 잘 작성해야 한다.