SSR

🐤 What Is SSR?

SSR은 브라우저가 페이지를 보여주기 전에 서버에서 HTML을 먼저 만들어서 보내주는 방식이다.

사용자 → 서버에 요청 → 서버에서 HTML 생성 → 브라우저에 전달 → 화면 표시

SSR과 CSR의 차이

---

🐤 SSR 동작 원리

1. 사용자가 페이지 접속
2. 서버가 필요한 데이터를 조회 (DB, API 등)
3. 서버가 HTML을 완성해서 보냄
4. 브라우저는 그 HTML을 바로 화면에 표시
5. 이후 JS가 실행되며 인터랙션 붙음 (Hydration)

SSR의 장점

• 빠른 첫 화면 로딩 (백지 화면 없음)

• SEO 최적화 (검색 엔진이 HTML 읽음)

• 소셜 공유 미리보기 가능 (meta 태그 기반)

• 로그인 상태, 권한별 페이지 표시 가능

SSR의 단점

• 서버 부하 증가 (접속할 때마다 HTML 생성)

• 페이지마다 매번 렌더링 필요

• 캐싱 설계가 복잡해질 수 있음

• JS 초기화(Hydration)로 약간 딜레이 발생

---

🐤 SSR이 필요한 상황과 지원하는 프레임워크

• Next.js (React 기반)

• Nuxt.js (Vue 기반)

• Nest.js + SSR 모드

• Ruby on Rails, Django 등 기존 서버 템플릿 기반 프레임워크

*Next.JS에서의 SSR

Next.js는 getServerSideProps() 함수를 통해 SSR을 구현할 수 있다.

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

• 이 함수는 매 요청마다 서버에서 실행되어 HTML에 데이터를 채워 보낸다.

SSR과 SEO (검색 최적화)

• Google, Naver, Bing 같은 검색엔진은 HTML을 먼저 읽음

• CSR의 경우 JS를 실행하지 않으면 아무것도 없어서 SEO 불리

• SSR은 HTML이 먼저 존재하기 때문에 검색엔진이 제목, 내용, 메타태그를 쉽게 읽음

---

🐤 SSR이 불필요한 경우

상황	이유
관리자 전용 내부 페이지	검색 노출 필요 없음
단순 SPA 앱 (로그인 전용, 채팅 등)	초기 로딩보다 상호작용이 더 중요함
앱이 완전히 클라이언트 중심일 때	React만으로 충분하고 더 빠름

SSR은 서버에서 HTML을 먼저 만들어 브라우저에 보내주는 방식
SEO, 첫 로딩 속도, 공유 최적화에 강하고
Next.js에서는 getServerSideProps()로 쉽게 구현할 수 있음

다만 서버 리소스를 더 쓰고, 상황에 따라 꼭 필요한 건 아님