웹 애플리케이션은 크게 클라이언트 사이드 렌더링(이하 CSR)과 서버 사이드 렌더링(이하 SSR)로 나눌 수 있습니다. 이번 포스트에서는 이 둘의 차이는 무엇인지 장단점은 무엇인지 알아보겠습니다.
클라이언트 사이드 렌더링
클라이언트 사이드 렌더링에서는 DOM 요소를 동적으로 구성할 수 있는 자바스크립트 파일을 서버 측에서 전송합니다. 클라이언트는 서버 측에서 받아온 자바스크립트를 실행해 사용자가 정보를 요청할 때마다 동적으로 HTML 페이지를 생생해 렌더링합니다.
클라이언트 사이드 렌더링은 싱글 페이지 애플리케이션(SPA) 방식의 웹페이지에서 널리 쓰입니다. CSR 방식에는 다음과 같은 이점이 있습니다.
- 다른 페이지로 넘어갈 때 새로고침으로 인한 화면 깜빡임이 없어 긍정적인 사용자 경험에 유리합니다.
그러나 첫 로딩 시 자바스크립트 번들링 파일을 모두 다운로드해야 하므로 첫 로딩 속도가 느릴 수 있고, 대부분의 검색 엔진이 자바스크립트 파일을 읽을 수 없어 SEO(검색 엔진 최적화)에 불리합니다.
서버 사이드 렌더링
서버 사이드 렌더링에서는 서버 측에서 완성된 정적 HTML 페이지를 전송합니다. 클라이언트에서 HTTP 요청을 보낼 때 서버에서 HTML 페이지를 생성하여 클라이언트에 전송합니다. SPA에서 서버 사이드 렌더링을 사용하면 다음과 같은 장점이 있습니다.
- 검색 엔진 최적화에 유리합니다.
- 대부분의 검색 엔진은 자바스크립트가 아닌 HTML 문서만을 읽을 수 있습니다. (자바스크립트를 읽을 수 있더라도 정확히 읽지 못하는 경우도 있고요.) 클라이언트 사이드 렌더링 방식에서는 클라이언트가 자바스크립트 번들링 파일을 통해 HTML 페이지를 동적으로 생성해야 하기 때문에, 자바스크립트를 읽을 수 없는 검색 엔진에게 불리합니다!
- 첫 로딩 속도를 높일 수 있습니다.
- SSR을 사용하지 않는 SPA는 첫 로딩시 빈 HTML 페이지와 자바스크립트 번들링 파일을 다운로드합니다. 이 때 웹 애플리케이션이 기능이 많고 무거울수록 다운로드할 파일이 많아져 로딩에 시간이 오래 걸립니다. SSR을 적절히 활용하면 이러한 단점을 개선할 수 있습니다.
Next.js 세팅
Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.
Next.js 코드 분석은 다음 과제를 수행하면서 보완할 예정입니다.
참고자료
신세한탄의 CSR&SSR
알아보자 CSR, SSR
React.js 개발자를 위한 SSR 앱 개발 및 배포하기
SSR, SSG, JAM Stack이 뭔가요? (+ CSR, SEO, Next.js, Nuxt.js, Gatsby)
