02522025년 7월 26일

[Next.js] CSR과 SSR — Next.js에서의 개념과 실제 사용 방법

Next.js는 React 기반 프레임워크로, CSR(Client Side Rendering)과 SSR(Server Side Rendering)을 모두 지원한다.

단순히 개념만 아는 게 아니라, Next.js에서는 이걸 어떻게 구현하는지가 핵심이다.

CSR이란?

렌더링을 브라우저가 직접 수행하는 방식이며, 서버는 HTML 껍데기만 주고, 실제 화면은 자바스크립트가 실행되면서 만들어진다.

1. Next.js에서 CSR 쓰는 방법

: CSR은 기본 상태이다. 특별한 설정 없이 컴포넌트 안에서 useState, useEffect 등을 사용하면 자동으로 CSR이다.

JavaScript

// App Router or Pages Router 모두 해당
'use client'

import { useState } from 'react'

export default function MyComponent() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 횟수: {count}
    </button>
  )
}

App Router에서는 use client 지시어가 필수다.
Pages Router에서는 기본이 CSR이므로 따로 붙일 필요 없다.

SSR이란?

렌더링을 서버에서 먼저 수행하고, 완성된 HTML을 브라우저에 전달하는 방이며, SEO 최적화, 초기 로딩 속도에 유리하다.

1. Pages Router에서 SSR 사용하는 법

JavaScript

// pages/index.tsx
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: { data },
  }
}

export default function Home({ data }) {
  return <div>{data.title}</div>
}

getServerSideProps()가 있으면 SSR로 작동함
매 요청마다 서버가 페이지를 새로 렌더링함

2. App Router에서 SSR 사용하는 법

JavaScript

// app/page.tsx
export default async function Page() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store', // 요청마다 서버에서 새로 받아오기 → SSR
  })
  const data = await res.json()

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

App Router에서는 fetch() 위치와 cache 옵션으로 SSR/SSG 제어가 가능하다
- cache: 'no-store' → SSR
- cache: 'force-cache' or default → SSG

3. 혼합 사용도 가능

: Next.js는 페이지 전체를 SSR, 혹은 일부만 CSR로도 가능하다. 예를 들어, 페이지는 SSR로 렌더링하되, 일부 컴포넌트만 CSR로 처리하는 방식도 있다.

JavaScript

// app/page.tsx
import ClientComponent from './ClientComponent'

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

  return (
    <div>
      <h1>{data.title}</h1>
      <ClientComponent /> {/* useState 등 CSR 동작 */}
    </div>
  )
}

JavaScript

// app/ClientComponent.tsx
'use client'

export default function ClientComponent() {
  const [open, setOpen] = useState(false)
  return <button onClick={() => setOpen(!open)}>Toggle</button>
}

정리: CSR / SSR 실제 사용법 비교

방식	사용 위치	구현 방법
CSR	컴포넌트	'use client' 지시어 사용 후 useState, useEffect 등
SSR (Pages)	pages/	getServerSideProps() 사용
SSR (App)	app/	async 컴포넌트 + fetch(..., { cache: 'no-store' })
SSG (정적)	app/	fetch(..., { cache: 'force-cache' }) 또는 기본 캐시 사용

마무리

Next.js에서는 CSR/SSR을 페이지 단위 또는 컴포넌트 단위로 선택적으로 적용할 수 있다.

유저 상호작용 중심 → CSR
초기 로딩 속도, SEO 필요 → SSR
거의 변하지 않는 데이터 → SSG

프로젝트 상황에 맞게 전략적으로 선택하는 것이 중요하다. 그게 Next.js를 잘 쓴다는 의미다.

최근 글