SSR(Server Side Rendering)
서버 측에서 렌더링 준비를 끝마치고 클라이언트에 전달하는 렌더링 기법
SSR 렌더링 방식
- 유저가 웹사이트에 요청을 보냄
- 클라이언트에 요청이 전달되는 순간 서버에서 이미 렌더링 준비 완료로 HTML이 즉시 렌더링 됨 (JavaScript 읽히기 전)
- 클라이언트가 JavaScript를 다운
- 다운되는 동안 유저가 콘텐츠는 볼 수 있지만 조작은 불가능함 (그 대신 사용자 조작을 기억)
- 브라우저가 JavaScript 프레임워크를 실행
- JavaScript 컴파일 완료 → 기억해뒀던 사용자 조작을 실행하고 상호작용 가능하게 됨
즉, 서버에서 렌더링이 가능한 상태로 클라이언트에 전달되어 유저는 자바스크립트가 다운되는 동안 무언가를 볼 수 있다.
CSR(Client Side Rendering)
서버가 요청을 받으면 클라이언트에 HTML과 JavaScript 전달하고 클라이언트가 렌더링 기법
CSR 렌더링 방식
- 유저가 웹사이트 요청을 보냄
- CDN이 HTML 파일과 JavaScript에 접근할 수 있는 링크를 클라이언트에 전달
※ CDN : 물리적으로 가까운 서버에서 요청에 응답하는 방식 - 클라이언트는 HTML과 JavaScript를 다운 (이때 유저는 아무것도 보지 못함)
- 다운이 완료되면 JavaScript 실행 (데이터를 위한 API를 호출함) → 유저는 placeholder를 보게 됨
- 서버가 API로부터 요청에 응답
- API에서 받아온 데이터를 placeholder 자리에 넣어줌
즉, 클라이언트에서 렌더링이 끝난 후 유저는 무언가를 볼 수 있다.
SPA(Single Page Application)
한 개의 페이지로 구성된 애플리케이션
특징
- 처음 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하고 이후에는 데이터를 받아올 때만 서버와 통신한다.
- CSR 방식으로 렌더링한다. (SPA와 CSR이 같은 것은 아니다. SPA가 CSR 방식을 채택한 것)
- 대표적인 SPA 프레임워크: React, Vue, Angular
장점
- 새로고침 시 깜빡거림이 없다.(UX)
- 렌더링 속도가 빠르다.(성능)
- 필요한 리소스만 부분적으로 로딩해 효율적이다.(성능)
- 서버에 정적 리소스를 한번만 요청하고, 받은 데이터는 캐시 형태로 저장해 놓는다.
- 서버의 템플릿 연산을 클라이언트로 분산하여 서버의 부담이 줄어든다.(성능)
- 컴포넌트별 개발이 용이하다.(생산성)
- 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능하다.(생산성)
단점
- JS 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다. → Webpack code splitting으로 해결 가능)
- 검색엔진최적화(SEO)가 어렵다.
- 보안 이슈
MPA(Multiple Page Application)
여러 개의 페이지로 구성된 애플리케이션
특징
- SSR 방식으로 렌더링한다. (MPA와 SSR이 같은 것은 아니다. MPA가 SSR 방식을 채택한 것)
- 새로운 페이지를 요청할 때마다 서버에서 렌더링 된 리소스(HTML, CSS, JavaScript)가 다운로드 된다.
- 페이지를 이동하거나 새로고침 하면 전체 페이지를 다시 렌더링한다.
장점
- 검색엔진최적화(SEO)에 유리하다.
- 처음 로딩 속도가 매우 빠르다.
단점
- 페이지 이동 시 깜빡거린다.(UX)
- 매 페이지 요청마다 새로고침이 발생한다. - 페이지 이동 시 불필요한 템플릿도 중복해서 로딩한다.(성능)
- 서버 렌더링에 따른 부하
- 모바일 앱 개발 시 추가적인 백엔드 작업이 필요하다.(생산성)
초심 잃지 말기 🙂