렌더링 방식
렌더링 방식이란 누가 그리냐에 따라 정해진다. 즉 주최가 누구이냐에 따라 정해진다. 서버에서 그리면 SSR이 되는 것이고 클라이언트에서 그리게 되면 CSR이다.
SEO
SSR과 CSR에 대해 알아보기 전에 SEO에 대해 알아보겠다. SEO는 웹사이트가 검색결과에 더 잘 보이도록 최적화하는 과정을 말한다. 구글이나 네이버에 어떠한 키워드를 검색했을 때 가장 상단에 등장하는(유료 제외) 사이트들이 검색 엔진에 가장 많이 노출이 된 사이트이고 이는 곧 매출과 연관이 있을 수도 있다. CSR의 경우 초기에 빈 html 파일을 불러들이기 때문에 검색 엔진에 노출이 되지 않는다. 반면, SSR은 초기 html 파일에 dom이 그려져 있어 검색 엔진에 노출되는 장점이 있다.
CSR의 경우 예시
1. 사용자가 '사과'를 검색한다.
2. 검색 엔진이 웹을 크롤링하며 보여 줄 사이트를 찾는다.
3. 페이지를 들어갔는데 아무 내용이 없다.
4. 검색 엔진이 보여 줄 내용이 없기 때문에 검색에 노출시키지 않고 그대로 나간다.
5. 검색 엔진이 나가고 나서 js파일이 실행되고, dom이 그려진다.
SSR의 경우 예시
1. 사용자가 '사과'를 검색한다.
2. 검색 엔진이 웹을 크롤링하며 보여 줄 사이트를 찾는다.
3. 페이지를 들어갔는데 사과에 대한 내용이 있다.
4. 검색 엔진이 사용자에게 검색 결과를 노출시켜준다.
SSR(Server Side Rendering)
서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. 사용자의 요청 마다 서버에서 자원을 가져와 렌더링을 해주는 것이다.
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<div>
<p>SSR은 초기 렌더 시 DOM이 모두 구성되어있다.</p>
</div>
</body>
</html>초기에 DOM이 다 구성되어 있어서 브라우저가 빠르게 그려낼 수 있다. 그래서 초기 렌더링이 빠르고 DOM에 내용이 차있기 때문에 검색 엔진들의 정보 수집이 용이해져 SEO에 유용하다. 다만 페이지의 내용이 바뀌면 서버에 재요청하게 되고 새로 그려야하기 때문에 리렌더링 시 CSR에 비해 속도가 느릴 수 있다.
장점 : 초기 렌더링 속도가 빠름, SEO에 유용하다.
단점 : 요청마다 새로고침이 일어나고, 초기 렌더링 이후에 리렌더링 시 속도가 느릴 수 있다
CSR(Client Side Rendering)
CSR은 웹 페이지의 렌더링이 클라이언트 단에서 일어나는 방식이다. 초기에 html, js, css파일을 순서대로 다운 받아 오고 초기 html은 비어있다. 후에 JS파일이 다운로드 되고 html 위에 dom을 그린다.
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>백엔드 호출을 최소화 할 수 있는 장점이 있다. 이후에는 화면이 변하는 만큼의 데이터만 요청한다.(.json) 그리고 라우팅을 해서 페이지가 이동하더라도 html이 바뀌는 것이 아니라 다른 js파일을 불러온 것 뿐이다.
장점 : 초기 렌더링 이후에 리렌더링 시 속도가 빠름(파일을 미리 다 받아왔기 때문에 서버에 요청하지 않음). 새로고침이 일어나지 않는다.
단점 : 초기 렌더링 속도가 느림(초기에 모든 파일들을 다운받아야하기 때문에 느림)
무엇을 써야할까?
CSR과 SSR에 대해 알아봤다. 서로 장, 단점이 있는데 무조건 어느 방식이 좋다가 아닌 상황에 맞게 써야하는 것이 중요하다.
사양
예를 들어, 서버가 2000년대 초반의 사양이고, 클라이언트는 슈퍼컴퓨터 수준의 사양이라고 하자. 서버에서 DOM을 구성하여 보여주게 되는 것 보다 클라이언트에서 DOM을 구성하는 것이 속도가 훨씬 빠를 것이다.
그리고 반대로 클라이언트가 모두 갤럭시3이고 서버가 슈퍼컴퓨터라고 가정해보자. 당연히 클라이언트에서 구성하는 것보다 서버에서 구성하여 컨텐츠를 보여주는 것이 빠를 것이다.
꼭 검색에 노출이 되어야하는가?
CSR이 SEO에 취약하다는 사실은 위에서 언급하였다. 그렇지만 모든 웹이 SEO에 노출이 되어야 유용한 것은 아니다. 우리의 사이트가 커머셜사이트라면 검색에 노출이 되어야 홍보가 되고 매출이 오를 것이다. 하지만 회사 내부 사람들만 사용하는 admin 사이트의 경우 보안을 고려해서라도 검색에 노출되는 것이 오히려 좋지 않다.
