토이프로젝트에 Next.js를 도입하려합니다. 그러려면 서버사이드 렌더링과 클라이사이드 렌더링에 대해서 알아야합니다.
서버사이드 렌더링 vs. 클라이언트사이드 렌더링
두 가지의 방법은 완전히 서로 배척점에 있어서 알맞게 쓰기 위해서는 각 방식의 장단점을 알아둬야합니다.
📚 SSR(server side Rendering)
- 서버에서 렌더링 준비를 마친 후 클라이언트에 전달하는 방식
- 유저가 웹사이트 요청을 보낸다.
- 서버가 즉시 렌더링 가능한 html 파일을 만든다.
- 클라이언트에 전달되는 순간, html을 즉시 렌더링 된다.
화면은 보이지만 아직 유저가 사이트 조작은 못하는 상황. 유저의 조작을 기억하고 있음.
- 그동안 열심히 클라이언트가 자바스크립트를 다운 받는다.
- 브라우저가 javascript 프레임워크를 실행한다.
- 기억해둔 조작을 실행한다. 이제부터는 웹 페이지와 상호작용이 가능하다.
📚 CSR(client side rendering)
- 서버는 html과 js를 보내고, 클라이언트에서 렌더링.
- 유저가 웹 사이트 요청을 보낸다.(동일)
- CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트에게 보낸다.
- 클라이언트는 HTML과 JS를 다운 받는다.
유저는 아무것도 못본다.
- JS를 실행하여 데이터를 받는 api를 호출한다.
이때 유저는 placeholder를 본다.
- 서버가 api에 응답한다.
- placeholder 자리에 데이터를 넣어준다. 이제 상호작용 가능하다.
CDN?
CDN(Content Delivery Network)은 협력하여 인터넷 콘텐츠를 고속 전송하는 지리적으로 분산된 서버 집단을 의미합니다.
CDN으로 HTML 페이지, javascript 파일, 스타일시트, 이미지, 동영상을 비롯한 인터넷 콘텐츠를 로드하는 데 필요한 자산을 신속하게 전송할 수 있습니다. CDN 서비스이 인기는 나날이 성장하고 있으며 Facebook, Netflix, Amazon을 비롯한 주요 웹사이트의 트래픽을 포함한 오늘날 웹 트래픽 대부분이 CDN을 이용하고 있습니다.
CDN을 올바로 구성하면 DDOS(Distributed Denial of Service) 공격 같은 일반적인 악성 공격으로부터 웹사이트를 보호하는 데도 도움이 될 수 있습니다. - 출처
차이점
1. 웹페이지 로딩 시간
- 첫 페이지로딩 시간
속도: SSR이 빠릅니다.
당연! CSR은 Html, css, 스크립트를 다 가져오기 때문입니다. - 나머지 로딩 시간
속도: CSR이 빠릅니다.
당연!22 CSR은 첫 페이지 로딩할때 다 가져왔지만, SSR은 첫 페이지 로딩한 과정을 정확하게 다시 실행하기에 느립니다!
2. SEO 대응
검색엔진 최적화를 위해서는 크롤러에 잘 읽혀야하는데, 처음부터 다 컴파일되어서 오는 SSR이 유리합니다. CSR 메타태그 정의에 어려움이 있어 불리합니다.
3. 서버자원 사용
당연히 SSR이 서버 자원을 더 많이 사용합니다.
- 리액트에서의 문제!
리액트는 기본적으로 CSR입니다.. renderToString 메소드를 사용하면 서버사이드 렌더링을 구현할 수 있는데, 이게 스택을 막고 동기적으로 처리되어 실행하는 동안 서버는 멈춥니다.....
📚 언제 어떤 것을 쓰는가
SSR을 사용
- 네트워크가 느릴 때
- SEO가 필요할 때
- 최초 로딩이 빨라야할 때
- 메인 스크립트가 크고 로딩이 느릴 때
- 상호작용이 별로 없는 웹사이트일 때
CSR을 사용
- 네트워크 빠를때
- 서버 성능 별로 일때
- 사용자에게 보여줘야하는 데이터 양이 많을 때.
- 메인 스크립트가 가벼울 때
- SEO 필요없는 사이트(사내 툴 같은 거)
- 상호작용이 많은 사이트일 때
📚 결론
- 구현해야하는 서비스를 분석해서, 잘 판단해서 써야합니다!
📚 NEXT.js
NEXT.js를 도입하면 서버사이드 렌더링과 클라이언트 사이드 렌더링을 쉽게 선택해서 구현할 수 있습니다! 다음 포스트에서는 Next js 공식 문서를 보면서 익혀보도록 하겠습니다.
출처
