1️⃣ SSR과 CSR에서의 주요 차이점은 무엇인가요?
💡 CSR(Client Side Rendering)
렌더링이 클라이언트 쪽에서 일어나는 방식
CSR의 단계
- 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.
- 이에 서버는 빈 뼈대만 있는 HTML을 응답으로 보내준다.
- 브라우저가 연결된 JavaScript 링크를 통해 서버로부터 다시 JavaScript 파일을 다운로드한다. (이때, 유저는 아무것도 볼 수 없다.)
- 다운 완료된 JavaScript가 동적으로 페이지를 만들어 브라우저에 띄워준다.
즉, 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는 것이 없다.
💡 SSR(Server Side Rendering)
서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
SSR의 단계
- 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.
- 서버는 렌더링 가능한 HTML 파일을 즉시 클라이언트에 전달한다. (이때, 유저는 콘텐츠를 볼 수 있다.)
- 클라이언트가 JavaScript를 다운 받는다.
- 다운 받아지고 있는 사이에 유저는 콘텐츠를 볼 수는 있지만 조작은 불가능하다. 이때의 사용자 조작을 기억한다.
- JavaScript가 다운 완료되면 기억하고 있던 사용자 조작을 실행한다.
즉, 서버에서 이미 렌더 가능한 상태로 클라이언트에 전달되기 때문에, JS가 다운로드되는 동안 사용자는 무언가를 볼 수 있다.
💡 CSR vs SSR
1. 웹페이지를 로딩하는 시간
- 첫 페이지를 로딩할 때
CSR의 경우, HTML, CSS와 모든 스크립트를 한 번에 불러온다. 반면 SSR은 필요한 부분의 HTML과 스크립트만 불러온다. 따라서 평균적으로 SSR이 더 빠르다.
- 사이트의 다른 곳으로 이동할 때
CSR은 이미 모든 코드를 받아왔기 때문에 빠르게 로딩하지만, SSR은 처음 로딩 과정을 다시 실행하므로 더 느리다.
2. SEO(검색엔진 최적화) 대응
검색 엔진은 '크롤러'로 웹사이트들을 읽는다.
CSR은 자바스크립트를 실행시켜 동적으로 콘텐츠가 생성되기 때문에 자바스크립트가 실행되어야 metadata가 바뀐다.
SSR은 애초에 서버사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.
3. 서버 부하
SSR은 매번 서버에 요청을 하기 때문에 서버 자원을 더 많이 사용한다.
반면 CSR은 클라이언트에 일감을 몰아주기 때문에 서버에 부하가 적다.
2️⃣ React와 Next.js 중 어떤 상황에서 각각을 선택해야 하나요?
- React는 라이브러리이고, Next.js는 React의 프레임워크이다.
- React는 CSR로 동작하고, Next.js는 SSR로 동작한다.
💡 React 선택 시
상호작용이 많은 애플리케이션에 적합하다.
React는 라이브러리이기 때문에, 프로젝트 구성을 완전히 제어하고 싶다면 React가 적합하다.
💡 Next.js 선택 시
SEO가 중요한 애플리케이션에 적합하다.
초기 페이지 로드를 빠르게 만들기 위해 적합하다.
3️⃣ SSR, CSR, SPA, PWA, Electron 등 다양한 전략이 있는데, 각 전략들은 어떤 상황에 사용되는 것이 적합하며 비즈니스에 어떤 이점을 가져다줄까요?
💡 SPA에서 SSR이 필요할 때
- 성능 및 초기 로딩 시간 개선
SPA는 크기가 크고 다운로드 시간이 길어질 수 있다. SSR을 사용하면, 사용자는 서버가 클라이언트에게 완전히 렌더링 된 페이지를 전송하기 때문에, 로딩하는 동안 페이지를 볼 수 있다. 이는 인터넷 연결이 느린 사용자에게 유익하다.
- 소셜 미디어 미리 보기 제공
링크를 소셜 미디어 플랫폼에 공유할 때, 웹 페이지의 콘텐츠 미리 보기를 생성하려고 시도한다. 대부분의 플랫폼은 JavaScript를 실행하지 않기 때문에, SSR 없이는 SPA에서 이런 미리보기를 생성할 수 없다.
💡 SSR이 유리한 서비스
- 전자 상거래 플랫폼
수많은 제품을 보유하고 있기에 SSR을 통해 로딩시간을 개선할 수 있으며 완전히 렌더링 된 페이지를 제공하여 사용자 경험을 향상할 수 있다.
- 뉴스 웹사이트
뉴스 웹사이트는 최신 콘텐츠를 빠르고 효율적으로 제공해야 한다. SSR을 사용함으로써 인터넷 연결이 느린 사용자에게도 기사를 즉시 보여줄 수 있으며 SEO에도 효율적이다.
- 마케팅 웹사이트
SEO에 크게 의존하는 웹사이트들은 SSR을 사용하여 검색 엔진 순위를 향상시키고 트래픽을 늘릴 수 있다.
💡 CSR이 유리한 서비스
- 실시간 애플리케이션
실시간 업데이트와 상호작용이 필요한 애플리케이션은 CSR을 통해 즉시 사용자 인터페이스 업데이트를 제공할 수 있다.
- 온라인 게임
클라이언트 측 렌더링을 통해 실시간 상호작용. 애니메이션 및 효과를 더욱 원활하게 제공할 수 있다.
💡 PWA가 유리한 서비스
- 모바일 애플리케이션 및 웹 앱
PWA는 오프라인 지원, 빠른 성능, 홈 화면에 아이콘 추가 등 다양한 기능을 제공하므로, 이러한 특성이 필요한 웹 앱 및 모바일 앱에서 유용하다.
💡 Electron이 유리한 서비스
- 메시징 앱, 편집 도구, 디자인 도구 등의 데스크톱 애플리케이션
Electron은 크로스 플랫폼 데스크톱 애플리케이션을 개발하는 데 유용하다.
