📍Client-side rendering: 전통적인 Vue.js 어플리케이션의 렌더링 방식
렌더링 과정
1. 브라우저가 빈 HTML을 다운로드
2. 브라우저가 JS를 다운받고 실행
3. 앱이 렌더링되고 인터랙티브해짐
📍Universal Rendering: CSR + SSR 하이브리드 방식 -> Nuxt 방식
- 서버에서 완전히 렌더링된 HTML 페이지를 반환(SSR) 하는데,
- 이는 Nuxt가 서버 환경에서 JS(Vue.js) 코드 실행하기 때문
- 이후에 추가로 브라우저가 JS를 다운받고 실행(CSR) 하면서 Vue.js가 통제권 가짐
📍CSR, SSR의 장단점 비교
CSR 장점
1. 개발 속도가 빠름
- 서버 환경과의 호환을 신경쓰며 코딩하지 않아도 됨
- 예) 서버에서는 window 객체, DOM API 사용 불가
2. 더 저렴한 비용
- SSR을 구현하기 위해 필요한 서버 운용 비용이 없음
3. 오프라인
- 코드가 브라우저에서만 작동하기 때문에 인터넷이 불가능한 환경에서도 제한적으로 유지 가능
4. 인터랙티브
CSR 단점
1. 성능
- 브라우저가 JS코드를 다운로드하고, 파싱하여 실행하기 까지 유저가 기다려야 함
- 이는 특히 네트워크 성능이 좋지 않을 때 UX를 악화할 수 있음
2. SEO
- CSR 렌더링된 HTML 페이지는 SSR 렌더링된 페이지보다 시간이 더 많이 걸림
- 검색 엔진의 크롤러는 CSR 렌더링이 완료될 때 까지 기다리지 않기 때문에 SEO에 악영향
-> 정리하자면, CSR은 인터랙션이 중요한 어플리케이션에 적합(SaaS, 백오피스, 온라인 게임 등)
SSR(Universal Rendering) 장점
1. 성능
- 유저는 즉각 페이지 컨텐츠에 접근 가능
2. SEO
- 웹 크롤러가 빠르게 페이지 컨텐츠에 접근 가능하여 인덱싱이 빠르게 이루어짐
SSR 단점
1. 개발 제약 조건
- 브라우저와 서버가 동일한 API 제공하지 않음
2. 비용
- 서버 운용 비용이 필요
-> 정리하자면, 다용도 앱에 적용 가능(+ 컨텐츠 중심 웹사이트, 블로그, 포트폴리오, 이커머스 등)
📍Nuxt의 하이브리드 렌더링
- Route Rules를 사용하여 라우트별 다른 캐싱 규칙을 적용하는데, 이는 서버가 주어진 URL에서의 새로운 요청에 어떻게 응답할지 결정
- Nuxt앱과 서버는 각각의 라우트 or 페이지에 대해 동일한 렌더링 모드(CSR, SSR)를 선택해야 함
- 이를 통해 특정 페이지는 CSR, 특정 페이지는 SSR 렌더링 되게 설정 가능