Web의 동작 원리 - Advanced

Jina·2020년 5월 5일
0

Session

목록 보기
11/12

SEO (search engine optimisation)

Website를 만들면 그 사이트로 많은 사람들이 유입될 수 있게 해야한다.
특히 검색을 통해서 나의 website로 사람들이 접근할 수 있도록 해야한다. 검색을 통해서 사람들이 잘 들어오기 위해서는 검색 엔진 최적화 (SEO)가 필요하다.

PageRank

구글의 크롤러 머신인 구글봇이 내용을 긁어오고 PageRank가 웹 페이지의 랭킹을 따지게 된다.
크롤러로 들어오는 링크를 기준으로 웹페이지의 등급을 매기게 된다.

SEO

PageRank에서 좋은 등급을 받기 위해서는 SEO가 필요하다. 우리 사이트 주소가 여기저기서 링크 되어 있어야 좋고, <head> 에 페이지 정보를 잘 작성해야 한다. 또한 사이트를 컴퓨터가 잘 이해할 수 있도록 만들어야한다.

Website

Static Website

말그대로 정적인 웹사이트를 static website라고 한다.
화면에 보이는 컨텐츠 그대로 html 파일에 작성되어있어서, 서버에 저장된 html 파일 그대로 브라우저에 보이는 것이다.

시간에 따라 항상 똑같은 내용을 보여주는 사이트가 static website에 적합하다.

Dynamic Website

Static website와 반대 개념의 웹사이트
서버에 저장된 html 파일이 그대로 브라우저에 그려지는 static website와 다르게 html 파일이 동적으로 만들어지는 것이다. 요즘 대부분의 웹사이트가 dynamic website라고 생각하면 된다.

airbnb 사이트를 이용하여 설명하면 다음과 같다. airbnb 사이트에 들어가면 접속할 때마다 추천 숙소 목록이 바뀐다. 목록 디자인은 그대로인데, 숙소 목록 데이터가 바뀐다.
처음에는 서울의 숙소 데이터가 나중에는 부산의 숙소데이터가 보여졌다고 하면, 서울 숙소의 데이터가 있는 html페이지 따로, 부산 숙소 데이터가 들어있는 html페이지가 따로 있는 것일까? 그것이 아니라 웹 사이트에서 동적으로 html 파일을 만드는 것이다.

이러한 사이트를 dynamic website라고 한다.

SSR (Server Side Rendering)

Server에서 페이지를 동적으로 만든다.

SSR은 페이지를 넘어갈 때 서버에 요청을 하고 렌더링을 진행하게 된다. 따라서 사용자가 접근할 때 마다 서버 요청이 이루어지게 된다. 이러한 이유로 사용자가 많을 시 서버 비용 증가의 문제 및 서버 다운 가능성이 있다. 그러나 처음 페이지를 가지고 올 때는 빠르게 가지고 올 수 있다.

CSR (Client Side Rendering)

Client에서 페이지를 동적으로 만든다. (React 이용하여 만드는 것이 CSR이다.)

CSR은 큰 자바스크립트가 한개 있는 형식이다. 따라서 첫 페이지를 렌더링할 때는 오래걸리는 단점이 있지만 다음 페이지를 넘어갈 때는 빠르게 넘어가는 장점이 있다.

SPA (Single Page Application)

사용자가 보기에는 여러개의 html로 구성된(여러 페이지로 구성된) 페이지이나, 실제 html은 한개인 페이지이다.

예시

MPA(Multi Page Application)

위의 그림을 보면 여러개의 페이지로 이루어져 있다.
url을 타고 타고 들어가야한다.

SPA (Single Page Application)

위의 그림을 보면 여러 페이지로 이루어져있으나 url이 같다.
즉 하나의 페이지로 이루어져 있다.

html파일에 하나의 div태그가 있고 자바스크립트 파일에서 요청에 맞게 html을 동적으로 생성하는 페이지이다. 아래의 그림을 보면 div태그가 하나뿐이다.

위의 사진에 있는 SPA은 가운데가 뚫려있는 html 파일이 있고 그 뚫려있는 부분의 html을 자바스크립트가 동적으로 생성하는 방식이다.

SPA 와 검색

SPA(주로 CSR로 만들어져있다)은 검색에 노출이 잘 되지않는다는 단점이 있다.
검색에 노출이 되기 위해서는 구글의 크롤러 머신인 구글봇이 내용을 긁어와야하는데, SPA는 html파일에 하나의 div 태그가 있는 형식이다. 따라서 크롤러 머신이 내용을 잘 긁어올 수 없고 검색에 노출이 잘 되지 않게 된다.

이러한 문제를 해결하기 위하여 next.js를 사용한다.

0개의 댓글