[기술면접] SSR vs CSR

💻 SSR vs CSR

• SSR (Server Side Rendering) : 화면의 렌더링이 서버에서 이루어지는 아키텍처
• CSR (Client Side Rendering) : 화면의 렌더링이 클라이언트에서 이루어지는 아키텍처

구분	SSR	CSR
초기 로딩 속도	빠름	느림
서버 부하	높음	낮음
SEO (Search Engine Optimization)	우수	추가 설정 필요
상호작용 속도	초기에 느리나 이후에 빨라짐	초기에 느리나 이후에 매우 빨라짐
실시간 데이터	상대적으로 불리	유리
사용자 경험	초기 화면 로딩에 유리	동적 UI 업데이트에 유리
성능 의존도	서버에서 렌더링이 이루어져 상대적으로 성능 의존도가 낮음	클라이언트에서 모든 렌더링이 이루어져 성능 의존도가 높음

---

⁉️ Next.js 기반에서는 CSR, SSR이 어떻게 다를까?

- CSR in Next.js

• 주요 특징 : 브라우저가 로드된 후 클라이언트가 JavaScript 파일을다운로드하고 HTML 콘텐츠를 렌더링한다.
• 사용 방법 : Next.js에서 useEffect와 같은 클라이언트 측 렌더링을 사용하는 훅을 통해 데이터를 로드하고 상태를 업데이트 할 수 있다.
• 장점 : 클라이언트에서 모든 데이터를 가져와 화면을 렌더링하기 때문에 서버 부담이 적고, 상호작용이 많은 SPA에 적합하다.
• 단점 : 초기 로딩 속도가 느려질 수 있고, 검색 엔진이 첫 화면을 크롤링하기 어렵기에 SEO가 불리할 수 있다.

- SSR in Next.js

• 주요 특징 : 서버가 각 요청마다 HTML을 생성하여 전달하므로, 브라우저가 페이지를 요청할 때 서버에서 즉시 HTML을 전달한다.
• 사용 방법 : getServerSideProps 라는 함수로 SSR을 구현한다. 이를 통해 Next.js는 페이지 요청 시마다 해당 함수에서 데이터를 가져와 서버에서 HTML을 생성한다.
• 장점 : 각 요청에 맞춰 서버에서 완성된 HTML을 반환하므로 SEO가 유리하고 초기 로딩 속도가 빠르다.
• 단점 : 서버에서 매번 HTML을 생성하기 때문에 서버 리소스를 많이 소비한다.

---

⁉️ Next.js 기반 SSR이 필요한 이유는?

SSR이 필요한 주요 이유는 SEO 최적화 및 초기 로딩 속도 개선이다. Next.js에서 SSR을 활용하면 다음과 같은 이점이 있다.

 

- 검색 엔진 최적화 (SEO)

검색 엔진이 페이지 콘텐츠를 정확하게 크롤링할 수 있다. SSR로 렌더링된 HTML이 서버에서 바로 전달되기 때문에, 검색 엔진은 JavaScript 실행 없이도 콘텐츠를 인식하고 색인을 생성할 수 있다.

SEO 최적화가 필요한 이유
1. 노출과 트래픽 증가
2. 타겟팅 된 트래픽 유입
3. 타사 대비 경쟁력 강화
4. 장기적인 마케팅 전략의 일환
5. 검색 엔진 사용자와의 상호작용 개선

 

- 빠른 초기 로딩

사용자가 페이지를 요청할 때 서버에서 이미 렌더링된 HTML을 전달하기에 화면이 빠르게 표시된다. 특히 이미지나 텍스트가 많은 페이지에서 사용자의 경험을 더 효과적으로 개선할 수 있다.

 

- 유저 맞춤형 콘텐츠 제공

유저의 위치 정보나 쿠키 등 동적 데이터를 기반으로 서버에서 맞춤형 콘텐츠를 제공하기에 유리하다.

ex) 이커머스 웹사이트에서 상품 목록 페이지는 SSR을 사용하여 빠르게 로드하고 검색 엔진에 최적화된 페이지를 제공할 수 있다.

---

⁉️ Next.js  vs CRA

- Next.js와 CRA는 무엇인가?

Next.js : Vercel에서 개발한 React 기반 프레임워크로, SSR(Server Side Rendering), SSG(Static Site Generation), API 라우팅 등 다양한 기능을 제공한다. 웹 에플리케이션의 성능과 SEO를 최적화하는 데 특화되어 있다.

 

CRA(Create React App) : Facebook 에서 제공하는 React 애플리케이션용 보일러플레이트로, React 프로젝트를 신속하게 시작하는 데 중점을 둔다. 기본적으로 CSR(Client Side Rendering)을 사용한다.

 

- 렌더링 방식

Next.js : SSR, SSG, CSR을 모두 지원하며, 페이지 별로 렌더링 방식을 선택할 수 있다. 따라서 초기 로딩이 빠르고 SEO에 유리하다.

 

※ 3가지 렌더링 방식을 모두 지원하고, 페이지 별 렌더링 방식을 선택할 수 있어 빠른 로딩이 필요한 곳에는 SSR, 동적인 UI가 필요한 곳에는 CSR을 사용하는 등의 hybrid rendering 을 지원한다.

 

CRA : 기본적으로 CSR 을 사용한다. 모든 JavaScript를 클라이언트에서 로드해 초기 로딩이 길어질 수 있고, SEO에 불리하다.

 

- 파일 기반 라우팅

Next.js : pages 디렉토리에 파일을 생성하는 것만으로 라우팅이 자동으로 설정되는 파일 기반 라우팅을 제공한다. 예를 들어 pages/about.js 파일을 만들면 /about 경로로 자동으로 연결된다.

 

CRA : 기본적으로 파일 기반 라우팅을 제공하지 않아 개발자가 react-router 같은 library를 추가하여 직접 설저해야 한다.

 

- SSG, SSR 지원

Next.js : getStaticProps와 getServerSideProps 함수를 통해 페이지 별로 SSG 또는 SSR을 간편하게 설정할 수 있다.

 

CRA : 기본적으로 SSG, SSR을 지원하지 않아, 이를 구현하려면 추가적인 설정이 필요하다.

 

- API 라우팅

Next.js : 기본적으로 API 디렉토리에서 API endpoint를 설정할 수 있고 serverless 함수로 처리되어 간단하게 백엔드 기능을 추가할 수 있다.

 

CRA : API 서버가 필요하면 백엔드 서버를 별도로 구현해야 하며, 프론트엔드와 통신을 위해 CORS(Cross Origin Resource Sharing) 설정이 필요하다.

 

- 개발 환경 및 빌드 설정

Next.js : 내부적으로 Webpack, Babel이 설정되어 있고, 설정파일(next.config.js)을 통해 쉽게 커스터마이징할 수 있다. 빌드 최적화도 내장되어 있어 자동으로 코드 분할 및 최적화가 적용된다.

 

CRA : Webpack과 Babel이 기본적으로 설정되어 있으며, eject 명령어로 커스터마이징이 가능하나, 직접 수정하면 관리가 어렵고 복잡해질 수 있다.

 

- SEO 최적화

Next.js : SSR, SSG를 통해 SEO가 훨씬 유리하고, next/head component를 사용해 페이지별 meta tag를 쉽게 설정할 수 있다.

 

CRA : SEO 최적화가 어렵다. CSR 기반이기에 초기 로딩 시 콘텐츠가 비어있을 수 있어 검색 엔진이 제대로 크롤링하지 못할 수 있다.

 

- 요약

Next.js : SSR, SSG, CSR 모두를 지원하며, SEO와 성능 최적화가 필요한 (복잡한)프로젝트에 적합.

CRA : React로 CSR application을 신속하게 구축하는 (단순한) application에 적합.