Web의 동작과정 #2

static Website

• 말그대로 정적사이트, 1대 웹사이트.
  서버에 저장된 html파일 그대로 브라우저에 보이는 것.
  연속적으로 같은 부분을 보여야하는 web site는 static web site로 만들게 된다.

dynamic Website

• 동적 사이트.
  시간마다 다른 페이지를 보여주어야 하는 web site에 사용된다.
  예를 들어, 다방이나 에어비앤비처럼 실시간으로 데이터가 업데이트 되고 업데이트 된 데이터를 반영하여
  보여지는 부분이 연속적으로 달라지기 때문에 dynamic web site로 만들게 된다.

SPA

single page application

• 실제로 가지고 있는 페이지는 한가지
  
  
• 이전의 물리적인 페이지 이동이 아님.
• url이 변하면 한가지의 이벤트로 인식하여 화면을 전환해준다.
  즉, 사진에서는 html파일안에 root라는 id를 가진 div만 존재하지만 사용자가 페이지이동을 원할때, 페이지간의 이동이 아닌 현재의 페이지에서 root안에 보여지고 싶은 페이지를 다시 그려줌으로써
  사용자의 눈에는 페이지가 이동한 것 처럼 보이지만 현재의 페이지가 원하는 페이지로 다시 재조립되어 눈에 나타나는 것을 뜻한다.

MPA

multi page application
기존의 페이지 이동방식.
브라우저의 변경사항이 있을 때 서버로 데이터를 요청하고 그 데이터(html,css,javascript 등...)를 받아서 보여주는 방식.

CSR, SSR

• CRS (client side rendering)
  - SPA라고 볼 수 있다.
  - 전체 HTML 다운로드-> JS 다운로드 -> JS 실행 -> DATA 서버로부터 받기 -> Content 확인가능
  이러한 동작구조로 인해 초기에는 로딩이 느릴 수 있지만 초기구동이 된 이후에는 사용자가 원하는 부분만 랜더링하면 되기 때문에 페이지 이동간의 속도가 빠르다.
  - html 노출이 되지않기 때문에 구글검색이 전혀 되지않는다.
• SSR (server side rendering)
  - 전통적인 랜더링 방식
  - CSR과의 반대
  - 각각의 페이지에 대해 서버에 요청을 하고 새롭게 받아온 페이지를 보여주는 방식이라 검색엔진에는 최적화 되어있다.
  - 전체를 로딩하다 보니 CRS보다 느릴 수 있다.
  - 대표적인 ssr 사용 서비스 : 네이버
  

Hydration

cra와 같은 client-side framework가 서버에서 전송한 정적 문서(html)를 데이터 변경에 반응할 수 있는 동적 형태(dom수정한다는 말)로 변환하는 client 측 process를 말한다.

isomorphic javascript

ssr과정 중 한 js 코드가 node에도 돌아가고 broswer에서도 돌아갈 때