본 글은 이후 챌린지를 진행하면서 개선할 예정입니다!
과제 리뷰
다른 분들 중 과제를 하면서 어떤 순서로 접근했는지 그 고민 과정을 블로그로 작성하신 분들이 있는데, 고민을 하는 과정을 의식적으로 생각하면서 접근할 수 있겠다는 생각이 들었다. 다른 분들이 어떻게 문제를 해결했는지 참고하며, 나도 같은 방식으로 과제를 해야겠다. (과제를 하나하나 다 분석하지는 말되, PR 위주로 훑어보기!)
SSR이란?
배달 음식으로 낙곱새를 시켰다고 가정해 봅시다. 비조리 혹은 조리 형태로 주문할 수 있겠죠.
CSR은 브라우저가 직접 asset들을 모아 HTML을 요리한다는 점에서 비조리 방식입니다.
SSR은 식당(서버)에서 음식 조리(렌더링)이 완료되는 조리 방식입니다.
SSR은 CSR보다 SEO(검색 엔진 최적화)에 유리합니다.
- CSR 방식에서는 검색 엔진 크롤러가 페이지를 요청한 후, 빈 HTML 페이지와 JS 파일을 다운로드합니다. JS 파일을 읽지 못하는 검색 엔진 크롤러는 정보를 읽어내지 못하고 지나칩니다.
- SSR 방식에서는 검색 엔진 크롤러가 페이지를 요청한 후, 정적인 HTML 페이지를 다운로드하기 때문에 JS 파일을 읽지 못하는 검색 엔진 크롤러도 정보를 읽어 사이트에 어떤 정보가 있는지 알아낼 수 있습니다.
SSR은 CSR보다 서버 부하가 큽니다.
조리를 해서 보내주는 낙곱새집은 비조리 밀키트를 보내주는 낙곱새집보다 요리사가 할 일이 많겠죠?
CSR은 브라우저가 HTML 페이지를 직접 렌더링하지만 SSR은 정적 HTML 페이지를 만들어 브라우저에게 보내줍니다. 그러므로 트래픽이 많이 몰릴 경우 응답이 느려지거나 메모리가 한도를 초과하여 서버가 동작을 멈출 수도 있습니다.
AWS CSR only 서비스의 경우 HTML, JS, CSS 파일을 S3 등의 저장소에 올려두고, CloudFront 등의 CDN을 붙여 별도의 컴퓨팅 자원 없이 정적으로 제공할 수 있습니다.
CDN(Content Delivery Network)은 각 지역에 캐시 서버(PoP, Points of presence)를 분산 배치해, 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달하게 하는 기술입니다.
SSR은 요청에 대한 다양한 정적 HTML을 직접 조립해 보내야 하므로 CDN 기술로 캐싱하기도 어렵습니다.
SSR과 SSG의 차이?
SSR은 요청이 들어왔을 때 렌더링하여 HTML 페이지를 생성하지만, SSG(static site generator) 이미 만들어 저장된 HTML 페이지를 보내줍니다.
CSR과 SSR의 성능 차이가 있나요?
fcp : first contentful paint
tti : time to interaction
Universal Rendering을 직접 구현해보기
지금까지 asset 파일을 관리하는 서로 다른 언어의 서버를 전제로 SSR을 설명했습니다.
하나의 환경에서 SSR과 CSR을 함께 지원하는 것을 Universal Rendering이라고 부릅니다. 하나의 로직이 서버와 클라이언트 양쪽에서 실행되는 것은 무슨 의미일까요?
React의 영우 서버 측 React(react-dom/server)에서 한번 앱을 렌더링하고, 문자열로 변환해 클라이언트에 넘겨줍니다. 응답을 받은 클라이언트는 넘겨받은 HTML 문자열을 받아 이벤트 리스너를 달아줍니다.(hydration)
하이드레이션을 사용하여 서버로부터 받아온 HTML 페이지에 하이드레이션을 하게 되면, 이벤트 리스너를 달아주기 전까지는 이벤트 실행이 되지 않기 때문에 TTI는 늦어지게 됩니다.
아하 모먼트!
코드는 진짜 작은 일부분.
서비스를 개발하고 구현하는 것은 당연한 것이고, 실제 배포 환경에서의 이슈 대응 능력까지 요구됨!
