static sites
90년대까지는 웹서버는 static sites
즉 서버에는 이미 만들어진 html를 url을 통하여 접속하면 그 페이지를 보여줬음
페이지 내에서 다른 링크를 클릭하면 계속 재 렌더가 되어 매우 효율성이 떨어짐
iframe
그러던 중 iframe 이라는 태그가 도입이 되며
레이아웃으로 헤더와 풋터, 네브바 등을 만들어놓고
그 내부의 iframe만 바꿔가며 렌더를 줄여가며 사이트를 구성할수 있게 됨
XMLHttpRequest
fetch API의 원조격이 됨
HTML을 전체를 가져오는 것이 아니라
이제 json 파일을 만들어와서 필요한 데이터만 js 언어를 이용하여 가져온 다음
Html로 동적으로 뿌려지게 되는 것
후에 AJAX로 불리게 되는데...
SPA (Single Page Application)
ajax를 통하여 만들어진 웹 어플리케이션
한페이지에서 머무르면서 여러 패치를 할수 있게 됨
구글 맵처럼 구글맵 하나의 주소를 이용하지만 그 페이지내에서 지도를 클릭하여
그곳의 정보를 패치해오거나 지도를 이동할수 있게 됨.
이렇게 js의 중요성이 커지면서 리액트 앵귤러 뷰같은 프레임 워크들이 나오고
CSR를 사용하게 됨
CSR (Client Side Rendering)
- 사이트 접속 서버에서 비어있는 인덱스 파일 받음
- html에 필요한 js 파일을 받음
- 그 파일이 합쳐져서 app.js를 통해 정상적인 사용이 가능함
클라이언트에서 모든 것들이 이뤄지는 것이라 생각하면 됨
Html Index는 텅 비워져있고 서버에서 app.js의 파일을 받고 부분적으로 필요한 것들을 Json으로 가져와서 app.js에 더해진다음 사용자가 이용을 할수 있게 된다
Js를 어떻게/많이 분할하여 빨리 도달하게 해야할지 고민해야함
단점으로는 app.js에는 페이지를 구성하는 모든 소스가 들어가 있어서 로딩을 하는데 오래 걸린다는 점과
seo가 있음
SEO (Search Engine Optimization)
구글이나 네이버 같은 검색 엔진들은 파일의 코드들을 다 분석하고
검색엔진에서 사용자가 관련있는 검색을 하게 된다면 해당 페이지를 확인 할 수 있게 해줌.
그러나 CSR을 하게되면 index가 비워져 있기 때문에 검색 엔진들은 코드를 확인하여도 사이트에 대해서 알기가 어려움
그래서 SSR이 도입이 되게 됨!
SSR(Server Side Rendering)
사이트 접속 완성된 Index를 받아 먼저 보여주고 js를 가져와서 app.js를 완성 시킴 Js가 오기전에 비어있는 시간이 꽤 길수 있음
CSR처럼 클라이언트에서 모든 것을 하는 것이 아니라
웹사이트에 접속하면 서버에서 모든 데이터를 가져와서 Html파일을 만들고
동적으로 조작할수 있게 소스코드와 함꼐 클라이언트에게 보내지게 됨
클라이언트는 사용자에게 바로 파일을 보여줄수 있게 됨
페이지 로딩이 빨라지고 컨텐츠가 html에 담겨져있어서 효율적이게 seo가 가능함
하지만 단점이 있음
1.클릭하면 static sites처럼 이동하기에 새로고침 문제가 있음
2. 서버에 과부하가 걸릴수 있음 사용자가 클릭할때마다 요청이 들어가기 때문에 서버가 많이 사용됨
3. 사용자가 빠르게 확인 할수있지만 동적으로 이용할 Js가 느리게 와서 클릭하여도 반응하지 않을 수 있음
SSG (Static Site Generation)
csr에 특화된 프레임워크도 라이브러리를 통하여
정적으로 index페이지를 만들고 배포한 다음에
동적으로 js파일을 가지고 있을수 있고 데이터를 추가로 받아올수도 있음
NEXT.js
React
Express.js (의 기능)
React-Router-Dom (의 기능)
Server Side Rendering
을 모아놓은 기술이라고 생각하면 되며 하나의 기술로 4가지의 기능을 하며
기존에는 ssr를 위주로 사용 할수 있었지만 이제는 csr과 ssr을 섞어서 유연하게 사용할수 있게 해주고 있음!
NEXT.js 의 Route
url에 따라서 ui를 어떻게 구현할 것인가
주소에 따른 페이지가 어떻게 나올지 생각하는 것
경로를 다이나믹 폴더를 만들어서 동적인 Route를 시킬수 있음
