static website
말 그대로 정적인 웹사이트
가장 최초의 모습
예를 들면 절대로 콘텐츠가 변하지 않는 포트폴리오( 자주 바뀌지 않음 ) , 회사 소개, 개츠비
물리적으로 특정 폴더 안에 index, css, js 파일이 있다. 그래서 사용자가 들어갔을 때 index.html을 응답으로 주고, 만약 페이지를 이동하면 그 html로 넘어가게 된다. 물리적으로 가지고 오는 것이 정적인 페이지이다.
위코드 사이트는 보통 바뀔 일이 없기 때문에 정적 사이트
2차때 server side rendering으로 할 수도 있으므로 잘 알고 있어야 함
html이 고정되어 있고 특정 페이지를 물리적으로 응답해주는 것
Dynamic Website
동적 페이지는 동적으로 html이 만들어 지는 것
요즘 대부분의 웹사이트들이 동적이다.
클래스 101의 디테일 페이지를 보면 부동산 관련한 내용, 그림이랑 관련된 내용 html은 똑같지만 내용은 다르다. 이거는 틀은 짜 놓고 백엔드에서 데이트만 가지고 와서 뿌려주는 것
정적 사이트인데 렌더링을 클라이언트에서 하느냐 아니면 서버에서 하느냐가 중요하다. 이게 왜 중요할까?
SPA ( Single Page Application)
cf) MPA 한 페이지마다 html 파일이 따로 따로 있는것
홈페이지라면 index.html detail.html
싱글페이지는 페이지가 딱 하나만 존재하는 것
물리적으로 있는 html은 딱 하나.
리액트에서
안에서 모든 것이 연결
리액트 라우터 돔이 그런 함수를 호출 하는 것이다.
CSR
문제, html이 뻥 뚫려 있는데 검색 노출이 하나도 안된다.
SSR의 대표적인 문제
뷰, 리액트 , 앵귤러 다 CSR이다.
구글 검색 봇이 페이지를 계속 크롤링을 해서 분석을 하는데 그런것을 하지 못한다.
http 통신이 가능하도록 클라이언트에 리액트 코드만 얹혀놓은 서버
http 통신을 통해서 html 파일을 불러옴
프론트 웹서버 따로 백엔드 서버 따로 띄워서 서로 통신
이때의 상태를 구글 봇이 크롤링함
스크립트 태그로 js, css 가져오면서 서버 클라이언트와 소통
만약 fetch라는 api를 호출하게 되면 자바스크립트에서 브라우저로 백엔드로 호출하는 것
백엔드 서버에서 데이터베이스에 갔다가 다시 주면 프론트에서 그걸 받는 것
spa가 곧 csr이다.
검색 노출이 어려움
SSR
Server Side Rendring
랜더링을 서버에서 해줘서 그걸 응답으로 프론트에 보여주는 것
네이버는 전부 다 html로 들어와있다.
html에 데이터가 다 심어져서 나온다.
응답이 json으로 왔다갔다 하는 것이 아니라 html파일 자체가 왔다갔다 하는 것
프론트에서만들어놓은 리액트 코드가 프론트에서 구동하는게 아니라 백에서 구동하는 것
결국 실무에 갔을 때 챙겨야 하는 것
Next.js
백엔드에서 랜더링 하고 보여주는 것
이런걸 할 수 있는 프레임 워크들이 많이 쓰인다.
알고 쓰는 것과 모르고 쓰는 것은 다르다. 몰라도 쓸 수 있지만, 알면 더 잘 쓸 수 있다.
hydration
동적 사이트를 만들기 위해서 돔을 조작하는 것
somorphic javascript
프론트 코드를 만드는 자바스크립트 코드가 백엔드에서도 돌아가고 프론트에서도 돌아가는 것
next.js
우리가 만든 코드가 어떨 때는 SSR, 어떨 때는 CSR
자바스크립트에서 윈도우라는 전역 객체를 쓸 수 없다.
