(CS) [렌더링 과정] SSR

SSR이란?

사용자의 요청이 들어올 때마다 서버에서 HTML을 실시간으로 생성해서 브라우저에 전달하는 렌더링 방식

• 브라우저가 요청하면 서버는 미리 데이터를 가져와 완성된 HTML을 생성해 응답
• 브라우저는 HTML을 바로 렌더링 → 초기 화면 표시 속도가 빠름
• 이후 자바스크립트를 로드해 클라이언트에서도 동작 가능하게 함 (hydration)
  • hydration?

     - 서버에서 생성된 정적인 HTML에 자바스크립트 기능을 연결(활성화)하는 과정

    • 빠르게 HTML을 보여주긴 하지만 브라우저에서 Hydration이 완료되어야 실제로 클릭, 입력 등의 인터랙션이 가능해짐

⸻

작동 흐름

브라우저 → HTML 요청 → 서버가 데이터 fetch 후 HTML 생성 → 브라우저에 응답
↓
브라우저는 완성된 HTML 렌더링 → JS 파일 실행 → 인터랙션 가능 상태로 전환(hydrate)

React 기반 프레임워크인 Next.js에서 대표적으로 SSR을 사용

⸻

예제 코드 (Next.js)

// app/page.tsx
export default async function HomePage() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store', // SSR
  })
  const data = await res.json()

  return <div>{data.message}</div>
}

• fetch()에 cache: 'no-store' 옵션을 주면 → SSR처럼 매 요청마다 fresh fetch

⸻

장점

• 초기 렌더링 속도 빠름 → 사용자가 빠르게 콘텐츠 확인 가능
• SEO에 매우 유리 → HTML에 콘텐츠가 포함되어 검색 엔진이 쉽게 인식 가능
• 페이지 단위로 데이터 요청 및 렌더링이 가능

⸻

단점

• 요청마다 서버 연산 발생 → 트래픽이 많을수록 서버에 부하가 큼
• 서버가 응답을 준비할 때까지 기다려야 하므로 초기 응답까지 시간이 걸릴 수 있음
• 복잡한 캐싱 전략 필요

⸻

실제 사용 사례

• 검색엔진 최적화(SEO)가 중요한 마케팅/블로그/뉴스 사이트
• 로그인 여부에 따라 초기 데이터가 달라지는 서비스
• 예: Next.js 기반 기업 홈페이지, 블로그 플랫폼

⸻

SSR에서 사용되는 복잡한 캐싱 전략들

1. HTTP 캐싱 (브라우저 & CDN 레벨)

• Cache-Control, ETag, Last-Modified 등의 HTTP 헤더를 설정해 브라우저 또는 CDN이 응답을 캐싱하도록 유도
• 정적 리소스뿐 아니라 SSR 응답도 특정 조건 하에 캐시 가능

Cache-Control: public, max-age=60
ETag: "abc123"

max-age=60 → 60초 동안은 클라이언트가 서버에 요청하지 않고 캐시된 응답 사용
CDN을 활용하면 글로벌하게 빠른 응답도 가능

⸻

2. 서버 메모리 캐싱 (in-memory)

• 서버 내부에서 특정 데이터나 HTML 결과를 메모리에 저장
• 대표 예: Node.js의 LRU 캐시, lru-cache, node-cache 등

  const cache = new Map();
  

app.get("/page", async (req, res) => {
if (cache.has("page-html")) {
return res.send(cache.get("page-html"));
}

const data = await fetchData();
const html = renderToHtml(data);

cache.set("page-html", html);
res.send(html);
});

단점: 서버 재시작 시 캐시가 모두 날아감

⸻

3. Redis 등 외부 캐시 스토리지 사용
- 캐시를 서버 외부 저장소(ex. Redis)에 저장하면 다중 서버에서도 공유 가능
- 캐시 만료 조건을 세밀하게 설정 가능 (예: TTL, 조건부 갱신)

const cached = await redis.get("page:123");
if (cached) return res.send(cached);

// 없으면 생성 후 저장
const html = renderToHtml(data);
await redis.set("page:123", html, { EX: 60 });

⸻


4. 캐시 계층화 전략 (Multi-tier caching)
- 클라이언트 캐시 (브라우저)
- CDN 캐시 (Cloudflare, Akamai 등)
- 서버 캐시 (Memory, Redis 등)
- DB 캐시 (Query 결과를 저장)

이런 식으로 각 계층에서 효율적인 캐싱을 적용하는 게 SSR 성능 최적화의 핵심!