안녕하세요 :)
오늘은 SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 차이점에 대해 알아 보겠습니다. 🐹
🙌🏻 SSR (Server Side Rendering)
서버 사이드 렌더링(SSR)이란, UI 로직이 담긴 HTML 파일을 서버 측에서 렌더링하는 방식을 말합니다. 서버에서 렌더링이 완료된 HTML 파일을 전달받기 때문에 사용자는 곧바로 웹 사이트를 볼 수 있습니다. 그러나 사용자와의 인터렉션을 요구하는 자바스크립트 파일이 브라우저상에 다운로드되기 전까지 사용자는 어떠한 행위도 수행할 수 없어, TTV(Time To View)와 TTI(Time To Interaction) 사이의 공백 시간이 존재하게 됩니다.
🙌🏻 CSR (Client Side Rendering)
클라이언트 사이드 렌더링(CSR)이란, 서버로부터 비어 있는 HTML 파일을 전달 받아 클라이언트 측에서 렌더링하고 자바스크립트 파일을 Hydration 하는 방식을 말합니다. HTML 파일을 렌더링하기까지 사용자가 화면을 볼 수 없다는 단점이 있지만 화면을 볼 수 있는 동시에 인터렉션을 수행할 수 있습니다.
💡 Hydration
HTML 파일과 자바스크립트 코드를 연결하는 과정 혹은 각 DOM 요소에 이벤트 리스너를 연결하는 과정
이렇듯, SSR과 CSR 방식은 어느 곳에서 HTML 파일을 렌더링하는 지에 따라 나뉘게 됩니다. 또 그에 따라 발생하는 장단점이 존재하게 되고, 어떤 경우에 어떤 렌더링 방식을 적용하는 것이 더 효율적인지 알아 보겠습니다.
🌵 SSR 장단점
- 장점
- 서버로부터 pre-rendering된 HTML 파일을 전달받기 때문에 검색 엔진 최적화(SEO)에 용이
- 초기 로딩 속도가 빠름
- 단점
- 사용자가 페이지를 볼 수 있는 시간과 인터렉션할 수 있는 시간 사이의 공백이 존재하여 사용자가 불편함 호소
- 페이지 이동 시, 서버 측에서 HTML 파일을 다시 렌더링하기 때문에 초기 로딩 속도를 제외한 나머지 로딩 속도는 느림
- CSR 방식보다 서버의 부하가 큼
💡 SEO (검색 엔진 최적화)
웹 사이트를 검색 엔진에 잘 노출되도록 하는 작업
HTML 문서의 head 태그와 meta 태그에 등록된 데이터를 통해 검색 엔진에 노출될 수 있다.
🌵 CSR 장단점
- 장점
- 페이지 이동 시, 필요한 데이터만 전달받아 렌더링하기 때문에 초기 로딩 시간을 제외한 나머지 로딩 시간이 빠름
- 사용자는 페이지를 볼 수 있는 동시에 인터렉션이 가능
- 서버는 비어 있는 HTML 파일만 전달하기 때문에 서버의 부하가 적음
- 단점
- 서버로부터 비어있는 HTML 파일을 전달받기 때문에 검색 엔진 최적화(SEO)에 취약
- 초기에는 비어있는 HTML 파일에 자바스크립트 파일을 적용하여 페이지를 렌더링하기 때문에 초기 로딩 속도가 느림
🙂 SSR, CSR. 언제 사용하면 좋을까?
SSR
- 페이지에 자주 바뀌는 데이터가 존재하는 경우
- 랜딩 페이지나 블로그와 같이 검색 엔진에 노출되어야 하는 경우
CSR
- 사용자와 높은 상호작용을 필요로 하는 경우
- 프로필 페이지와 같이 검색 엔진에 노출될 필요가 없는 경우
'Next.js' 카테고리의 다른 글
| [Next.js] SSR 페이지에서 session pre-fetch 하기 (next-auth) (2) | 2023.05.01 |
|---|---|
| [Next.js] Planet Scale + Prisma 배포하기2 (Vercel) (0) | 2023.04.04 |
| [Next.js] Planet Scale + Prisma 배포하기 (Vercel) (0) | 2022.10.18 |
| [Next.js] TinyMCE 라이브러리 사용하기 (+ 이미지 업로드) (0) | 2022.08.27 |