💡 SSR(서버사이드렌더링)
Multi page application - 여러 페이지로 구성된 웹 어플리케이션
서버에서 HTML, JS 파일 등을 모두 받은 이후에 서버에서 렌더링을 진행
서버에서 이미 '렌더링 가능한' 상태로 클라이언트에 전달되기 때문에, JS가 다운로드 되는 동안 사용자는 무언가(HTML)를 보고 있을 수 있다.
- 화면을 구성하는 각각의 페이지가 있기 때문에 SEO(검색엔진)에 노출유리
- 필요한 부분의 HTML과 스크립트만 서버에서 렌더링 하여 가져오기 때문에 초기 로딩이 빠름
- 매번 페이지를 요청할 때마다 새로 고침하므로 서버부담 증가, 화면깜빡임
💡 CSR(클라이언트사이드렌더링)
Single page application - 하나의 페이지로 구성된 웹 어플리케이션 (React, Vue, Angular..)
클라이언트에서 HTML, JS 파일 등을 받은 이후에 브라우저에서 렌더링을 진행
서버에서 처리 없이 클라이언트로 보내주기 때문에 HTML, JS가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없다.
- 맨 처음 HTML 파일이 비어있어 SEO(검색엔진)에 노출불리
- 클라이언트에서 모든 HTML, JS 파일을 다운 받은 뒤에 렌더링 하므로 초기 로딩이 느림
- 데이터 요청이 있을때만 서버에 요청하기 때문에 서버부담 감소
💡 SSG(SSR + CSR)
Next.js를 사용하면 React에서도 CSR, SSR을 혼합하여 빠른 성능을 구현가능
pre-rendering을 통해 처음에 미리 HTML 문서로 생성하여 가지고 그 뒤부턴 CSR방식을 채택
- pre-rendering을 통해 처음 HTML 파일이 있으므로 SEO(검색엔진)에 노출유리
- pre-rendering을 통해 처음 HTML 파일이 있으므로 초기 로딩이 빠름
- 데이터 요청이 있을때만 서버에 요청하기 때문에 서버부담 감소
Quak!