[매일메일] SSR의 개념과 장단점? (FE.250115)

SSR(Server Side Rendering)이란 무엇인가?

- 서버에서 완성된 정적 HTML을 클라이언트에 내려주는 방식

- 클라이언트는 해당 HTML을 파싱만 해서 화면을 랜더링함

 

CSR(Client Side Rendering)이란 무엇인가?

- 서버에서 비어있는 뼈대 HTML을 클라이언트에 받음

- 필요한 자바스크립트 번들을 다운로드하고 번들을 실행해서 동적으로 컨텐츠를 채움

 

SSR의 장점?

- SEO(Search Engine Optimization)에서 유리함.

- 크롤러가 컨텐츠를 쉽게 인식함.

- 초기 로딩 속도가 빠름. 이미 컨텐츠가 완성된 상태로 서버에서 보내주기 때문에 번들을 다운로드/실행할 필요 없음.

- 블로그나 커머스 등, 컨텐츠 노출이 중요한 웹 애플리케이션에 적합함

 

SSR의 단점?

- 클라이언트 사이드 라우팅이 불가능함. 빠르고 매끄러운 페이지 전환이 안됨.

- 클라이언트 요청 시마다 페이지를 동적으로 구성해서 서버에서 내려줘야 하므로, WAS 서버 구동으로 서버 비용 증가.

 

Next.js로 SSR을 구현할 경우의 단점?

- Next.js는 SSR 방식으로 정적 HTML을 내려받아 초기 화면을 빠르게 렌더링함

- 이후 hydration을 통해 이벤트 리스너를 부착하는 등 자바스크립트 작업을 수행하여 정적인 화면을 동적으로 전환함

 

1. hydration을 통해 동적인 화면으로 전환하는 경우 상호작용 초기화가 비교적 느림

- 페이지가 표시되는데 걸리는 시간(TTV)와 상호작용까지 걸리는 시간(TTI) 사이에 격차가 발생

- 버튼을 클릭해도 동작하지 않는 등의 문제가 발생할 수 있음

 

2. 구현 복잡도가 높음.

- 웹앱은 SSR+CSR을 혼합해 사용하기 때문에 로직을 구분해가면서 구현해야 함.

 

---

출처

1. 매일메일 250115. SSR에 대해 설명해주세요. 48번. https://maeil-mail.kr