💡 Develop
다시 주목받고 있는 SSR
date
May 23, 2024
slug
다시 주목받고 있는 SSR
author
status
Public
tags
Knowledge
summary
다시 주목받고 있는 SSR 왜 다시 주목 받고 있을까?
type
Post
thumbnail
category
💡 Develop
updatedAt
May 23, 2024 03:55 AM
SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 차이점을 알아보자
먼저 CSR의 단점과 왜 다시 SSR이 주목받고 있는지
CSR는 서버가 렌더한 페이지를 전송받아 보여주지 않고, HTML의 root자리 위에서 JS를 통해 스스로 웹사이트를 렌더한다. 즉 서버로부터 js로직을 받아서 빈 도화지에 새롭게 그려내는 것이 CSR방식이다. js의 로직파일은 적절히 분할 최적화되어 있지 않은 이상 한꺼번에 받기 부담스러운 크기일 수 밖에 없고, 이는 초기 구동시간이 길어지는 결과로 이어진다. 우리가 웹사이트에 접속했을 떄 바로 창이 뜨지 않고 흰 배경 로딩이 생기는 이유이다.
따라서 개발자들은 SSR을 다시금 주목하게 되었다. SSR은 서버로 부터 사용자가 보고자하는 페이지만을 받아 랜더링 하기때문에 효율적이며 그 페이지와 관련된 코드와 상태만이 전송된다. 그러나 리액트같은 프레임워크를 이용해 SSR를 구현하기란 쉽지 않은 일이다.
그래서 Next.js, Gatsby는 이 문제점을 해결해주었다. React와 결합되어있기 때문에 프론트엔드 개발자가 익숙한 방식으로 인터페이스를 신속히 작성할 수 있고, 또한 브라우저에 로드시킨 후 순차적으로 js를 렌더하는hydration기능을 지원한다.
빠른 초기구동 속도를 자랑하는 SSR의 장점과 리액트를 이용한 UX, DX 경험을 동시에 만족시키며 두 마리 토끼를 잡았다.
SSR의 단점은 뭘까?
‼️ 서버와 통신을 거쳐서 페이지 전체를 받아 로드하기 때문에 깜빡이는 블링킹 이슈가 발생한다.
‼️ TTV(Time To View)와 TTI(Time To Interact) 간의 차이로 인한 초기먹통문제가 발생한다. (TTV와 TTI란?)
‼️ 많은 유저가 접속하면 서버의 과부하 위험이 높아진다.
- 렌더링 책임은 서버에 있기 때문에 이는 당연한 결과이다.
‼️ 비용이 증가한다.
- 서버가 수행하는 작업의 많아지면서 서비스 제공자의 서버 유지비용이 상승한다.