SSR

1. SSR (Server Side Rendering) 서버에서 렌더링 준비를 마친 상태로 클라이언트에 자원을 전달한다. 1-1. SSR 작동 방식 유저가 웹사이트 자원을 요청 서버에서 “렌더링 가능한” HTML 파일 생성 (리소스 체크, 컴파일 후 완성된 HTML 콘텐츠 생성) 브라우저는 즉시 HTML 렌더링, 사이트 조작 불가 상태 클라이언트가 자바스크립트를 다운받는다. 다운로드하여지고 있는 사이 콘텐츠는 볼 수 있지만 조작은 불가, 이 기간 동안 유저의 액션을 기억 브라우저가 자바스크립트 프레임워크를 실행 자바스크립트가 컴파일된 후 기억하고 있던 유저 액션을 실행시킨다. 서버에서 렌더링 가능한 상태로 이미 전달되기에 자바스크립트를 받는 동안 특정 자원을 볼 수 있다. 1-2. SSR 장점 초기 페이지의 로딩속도가 빠르다. 서버에서 컴파일되어 클라이언트로 넘어오기에 클롤러 대응에 용이하여 SEO 친화적이다. 클라이언트 하드웨어 및 소프트웨어 성능에 영향을 덜 받는다. 1-3. SSR 선택 기준 네트워크가 느릴 때 (페이지마다 나눠서 불러오기 때문) 검색엔진 최적화가 필요할 때 최초 로딩이 빨라야 할 때 메인 스크립트가 크고 로딩이 느릴 때 웹사이트 상호작용이 별로 없을 때 2. CSR (Client Side Rendering) 렌더링이 클라이언트에서 일어난다. 서버에선 HTML과 JS를 보내고, 클라이언트에서 렌더링을 시작한다. 모든 로직, 데이터, 템플릿, 라우팅은 클라이언트에서 실행된다. 자바스크립트 번들 크기의 영향을 많이 받기에 코드 분할을 고려해야 하며, 적시 적소에 필요한 기능만을 제공해야 한다. ...