Static Site ❓
이전에 사용되던 방식으로 html은 server에 배포되어 있고 client에서 특정 주소에 접속하면 server에서 html을 받아와서 보여줌
문제점 : 페이지 내에서 다른 링크 클릭 시 서버에서 다시 html 문서를 가져옴, 페이지 전체가 업데이트 된다.
SPA ❓
Single Page Application
한 페이지에서 머무르면서 필요한 데이터를 서버에서 받아와 부분적으로 업데이트
CSR ❓
Client Side Rendering
서버에서 html을 받아 클라이언트에서 모든 것을 처리
사이트에 접속 시, 서버에게 인덱스 파일(비어 있음) 받아옴 -> 인덱스 파일에 링크되어있는 자바스크립트 요청 -> 동적으로 html을 생성할 수 있는 웹어플리케이션 로직이 담긴 자바스크립트 파일 받아옴 -> 웹사이트가 사용자에게 보여짐
SSR ❓
Server Side Rendering
서버에서 페이지를 모두 구성하여 사용자에게 페이지를 보여줌
웹사이트에 접속 시 서버에서 html파일을 만들고, 동적으로 제어할 수 있는 소스코드와 함께 클라이언트로 보냄 -> 클라이언트는 잘 만들어진 문서를 받아 바로 사용자에게 보여줌
SSR 방식의 장점
1. 첫번째 페이지 로딩이 빨라진다
2. 컨텐츠가 html에 담겨있음 -> SEO(Search Engine Optimization) 에 효율적
SSR 방식의 문제점
1. 사용자가 클릭 시 전체적인 웹사이트를 서버에서 다시 받아오는 것과 동일함으로 깜박임 issue
2. 서버 과부하
3. 동적으로 데이터를 처리하는 자바스크립트를 아직 다운받지 못한 상태로 클릭을 하면 반응이 없을 수 있음
React 에서의 SSR?
CSR 의 SEO 관련 단점을 위한 조치 -> Next.js
처음에 사용자가 들어왔을 때는 SSR 들어온 다음에는 CSR방식으로 동작하게 만들 수 있음.
