렌더링 이란
- 브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 말함
- 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것
- 만약 www.naver.com 을 입력한다면, 네이버의 서버로 화면을 그릴 내용을 요청하고 받아서 화면에 그림
- Client 에서 그린다면 CSR, Server 에서 그린다면 SSR 임
CSR
CSR 이란?
- CSR = Client Side Rendering
- 사용자가 요청할 때 마다, 리소스를 서버에서 보내주면 클라이언트 (브라우저) 는 이를 해석 해서 화면에 그려줌
예시
- body 안에는 id="root" 만 달랑 하나 들어있고, 어플리케이션에 필요한 자바스크립트의 링크만 들어가있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Amazing web site" />
<title>App</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
</html>
- HTML이 텅텅 비어있기 때문에 처음 접속하게 되면 빈 화면만 보이게 되고, 링크된 자바스크립트를 다운로드 받게 됨
- 여기에는 어플리케이션에 필요한 로직, 구동하기 위한 프레임워크, 라이브러리의 소스코드들도 모두 포함되어 있음
- 그렇기 때문에 처음 다운로드 받을 때 꽤나 시간이 소요될 수 있음 (TTFB = Time To First Byte)
- 따라서 다운받은 리소스를 화면에 그리는데도 시간이 오래 걸림 (FCP = First Colorful Paint)
장점
- SSR 에 비해 구현이 간단함
- Client 가 그리기 때문에, Server 에 무리가 없음
- 유저가 사이트를 사용할 때, 상호작용을 빠르게 할 수 있음
단점
- 사용자가 첫 화면을 보기까지의 시간이 오래 걸릴 수 있음
- 좋지 않은 SEO (Search Engine Optimization) 성능
- 검색엔진은 어떤 리소스가 클라이언트에게 보여질 지 알 수 없기 때문에, 검색 노출이 잘 안됨
유용하게 쓰일 수 있는 경우
SSR
SSR 이란?
- SSR = Server Side Rendering
- SSR은 CSR과 달리 클라이언트에서 모든 것을 처리하지 않고, 웹 사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML 파일을 만듦
- 다 만들면, 클라이언트에게 HTML 파일과, HTML 파일을 동적으로 제어할 수 있는 소스코드를 클라이언트에게 보내줌
- 클라이언트는 이렇게 이미 만들어진 HTML 문서를 사용자에게 바로 보여줌
SSR 의 장점 (= CSR 의 단점)
- 사용자가 첫 화면을 보기까지의 시간이 CSR 에 비해 빨라짐
- 보다 좋은 SEO 성능
SSR 의 단점
- Blinking Issue
- 사용자가 새로고침을 하게 되면 전체 웹사이트를 다시 서버에서 받아와야 하기 때문에 화면이 없어졌다가 나타남
- 서버 비용 증가
- 서버가 하는 일이 많다보니, 서버의 비용이 증가할 수 있음
- 또한 사용자의 요청이 많을 경우, 서버에 데이터를 요청하는 횟수가 많아짐에 따라 비용 증가 가능
- 상호작용 (event) 이 많은 사이트의 경우
- 매번 클라이언트에서 새로 그려야하기 때문에, SSR 의 장점을 살릴 수 없음
SSR 이 유용하게 쓰일 수 있는 곳
- SEO 가 필요한 곳
- 그려야 하는 컨텐츠가 아주 많은 경우 (서버는 클라이언트보다 빠르게 HTML 문서를 만들 수 있음)
- 클라이언트에게 최대한 빠른 화면을 보여주어야 하는 경우 (단 서버에서 빨리 줘야 함)
SSR 관련 프레임워크
- Next.js
- SSR의 대표주자
- v13 에서 페이지 단위가 아닌 컴포넌트 단위로 CSR, SSR 구현 (ClientComponent, ServerComponent) 이 가능
- 즉 컴포넌트 단위로 서버가 잘하는 것 (SSR) 은 서버에게 시키고, 클라이언트가 잘하는 것 (CSR) 은 클라이언트에게 시킬 수 있음
- 단 Next.js 는 배포 시 Vercel 을 사용하지 않는다면 배포가 번거롭다고 함, 다만 Vercel 은 비용이 비쌈
- Remix
- 과거에는 유료였으나 최근 오픈소스로 풀렸음
- 성능이 Next.js 에게 크게 모자라지 않으나 사용자 수는 1/10 도 안되는 수준
어떤 것을 선택해야 할까
- 중요한 것은 프로덕트에서 무엇을 중요하게 생각하냐 임
- SEO 가 중요하고, 컨텐츠가 많다면 SSR
- 컨텐츠가 그리 많지는 않으나 상호작용이 중요하다면 CSR
- 컨텐츠도 많고, 상호작용도 중요하고, SEO 도 중요하면 Next.js
참고자료
https://kemut.tistory.com/7
https://www.startupcode.kr/company/blog/archives/12
https://ctdlog.tistory.com/46