spa/mpa,csr/ssr

spa

Single Page Application 단일 페이지 어플리케이션
하나의 페이지라는 것은 HTML을 뜻한다. 둘 이상의 HTML 페이지를 가진 MPA와 달리 하나의 HTML로 웹페이지를 구동하기에 매 요청마다 새로운 HTML 페이지를 불러올 필요가 없다.
서버에서 페이지를 그리는 작업들이 프론트단에서 이루어지기에 서버쪽 렌더 페이지의 코드를 작성할 필요가 없다. 변경된 부분만 효율적으로 변경

spa 의 장점

• 디버깅 spa는 크롬또는 다른 브라우저로 네트워크 동작을 모니터링 할 수 있다. 페이지의 요소들과 페이지와 연관된 데이터들을 확인할 수 있다.
• 오프라인 사용 로컬 저장소의 활용성이 우수해진다. 앱이 한가지의 요청만 보내고 모든 데이터를 저장하기에 와이파이가 안좋은 곳에서 인터넷이 중간중간 끊겨도 문제없이 돌아가게 해준다.
• 유저 친화적 환경 새 페이지들을 지속적으로 로딩시킬 필요가 없어서 기다리는 시간이 없게된다. 사용자는 빠른 속도감과 로딩되지 않는 페이지로 데스크탑 앱을 사용하는듯한 느낌을 받게 된다. 필요한 부분들만 같은 페이지 상에서 업데이트 되기에 같은 요소들을 다시 다운받을 필요가 없다.

단점

• SEO SEO가 쉽지 않은 이유는 SPA의 컨텐츠가 AJAX를 통해서 로드되기 때문이다. AJAX나 Websocket과 같은 기술은 필요한 정보만 받아온 후 일부의 정보만 변경하는 방법으로 작동한다. 비동기방식으로 데이터 교환이 이루어지기에 크롤러가 데이터 수집을 제대로 할 수가 없다.

mpa

Multi Page Application 다중 페이지 어플리케이션 HTML페이지가 어러개이다. 각 페이지는 서버에 요청을 보낸 후 페이지의 모든 데이터를 업데이트 시킨다. 때문에 속도와 성능면에서 영향을 미침 이를 해결하기 위해 자바스크립트를 효율적으로 짜서 속도를 향상시키거나 적재되어있는 정보를 줄인다.

장점

• SEO 모든 페이지마다 메타태그를 붙임으로써 SEO를 관리하기에 용이하다.
• 많은 자료들 고전적인 방식인만큼 많은 사이트들이 MPA로 만들어졌다. 학습자료가 많이 쌓여있다.

단점

• 시간이 오래 걸리는 모바일 앱 MPA는 모바일 앱을 만들기 위해서는 SPA보다 더 많은 시간을 써서 구현해야 한다. 그 이유는 백앤드와 프론트앤드가 서로 단단히 연결되어있어서, 확연한 구분이 없기에 모두 신경써야한다. 개발이 복잡함

렌더링

렌더링이란 ??? 요청받은 내용을 브라우저 화면에 표시하는/그리는 작업.

과정

• 서버로부터 데이터를 응답받아 Parsing하여 DOM트리 생성
• DOM트리가 구축되는 동안 브라우저는 Render트리 구축
• CSS 설정 및 위치 지정
• Render 트리가 그려짐

ssr

Server Side Rendering 서버에서 렌더링을 작업한다. 기존부터 존재하던 방식으로 사용자가 웹페이지에 접근할때, 서버에 페이지에 대한 요청을 하며 서버에서는 html, view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환한다.

장점

• 검색엔진최적화: 서버사이드렌더링을 통해 얻을 수 있는 큰 이점이다.
• 성능개선: 첫 렌더링된 html을 클라이언트에게 전달해주기 때문에 초기 로딩속도를 많이 줄여줄 수 있다.

단점

• 프로젝트의 복잡도: 프로젝트의 복잡도가 올라갈 수 있다.

csr

Client Side Rendering 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식 클라이언트에서 자바스크립트를 통해 렌더링 하는 방식 SPA가 모두 CSR이 아니다!!!

장점

• 트래픽감소: 필요한, 변경된 데이터만 받아서 그린다
• 사용자경험: 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.

단점

• 검색엔진: 자바스크립트 위주로 돌아가는 프로젝트는 자바스크립트 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 못함. 크롬에서 react로 만든 웹앱의 소스를 확인하면, 내용이 비어있다. 그렇기 때문에 검색엔진 크롤러가 데이터를 제대로 수집하지 못함. 구글의 검색엔진은 자바스크립트 엔진이 내장되어있기도함.

SEO

Search Engine Optimization 즉 검색엔진최적화 대부분의 웹 크롤러, 봇들이 자바스크립트 파일을 실행시키지 못하고 HTML에서만 컨텐츠를 수집한다. 때문에 CSR방식으로 개발된 페이지를 빈 페이지로 인식하게 된다. 검색엔진에 제대로 노출이 되지 않는다면 웹페이지의 유입이 줄어든다. SSR은 view를 서버에서 전부 렌더링하여 내려주기때문에 HTML에 모든 컨텐츠가 저장되어 있기 때문에 SEO 적용에 큰 문제가 없다.

구글 검색엔진 최적화 방법

• 문법에 맞는 HTML 작성하기 <.title>태그에는 사이트 제목을 기재하고 <.strong>과<.em>태그를 활용해 강조하고 싶은 키워드에 붙이는 등 적절한 HTML 소스로 홈페이지를 구성하면 검색엔진이 이해하기 쉬운 웹 문서가 된다.
• 구체적인 페이지 제목 만들기
  헤더에 들어가는 페이지 제목은 구체적이고 간결하게 구성해 검색 결과 화면에서 텍스트가 잘리지 않도록 한다.
• 메타 태그 활용하기
  구글등 메타 태그 정보를 검색 알고리즘 평가 대상에서 제외하는 검색엔진이 증가한다지만, 검색엔진의 검색결과에도 표시되고 있기 때문에 포함하는 것이 좋다.
• 이미지에 alt 속성 기재
  alt속성이란, alternative의 의미로 이미지가 로딩되지 못했을 때 대신 표시되는 텍스트이다. 검색엔진 또한 이미지를 발견하면 alt 속성 안의 텍스트를 통해 인덱싱 작업을 하기 때문에 SEO에 좋다.
• 모든 페이지가 유입 페이지가 되도록 사이트 구성
  사용자가 꼭 홈페이지의 메인 페이지만 방문하는것은 아니다. 홈페이지 내 어떤 페이지로 방문이 유입될지 모르기 때문에 모든 페이지에는 메인 페이지로 이동할 수 있는 링크를 설치해 전체 사이트의 동선을 개선하는 것이 무엇보다 중요하다. 곧 사용자 편의성
• HTTPS 사용 권장
  동일사이트 라면 http로 서비스 하는 것보다, https로 서비스 할 경우 구글 검색엔진에 1%정도에 해당하는 랭킹 가산점을 부여한다.