React SSR / CSR / ISR 개념과 Next.js 소개

🧠 SSR / CSR / ISR 개념과 Next.js 소개

React를 활용한 웹 개발을 하다 보면 자주 접하게 되는 용어가 있습니다. 바로 CSR(Client Side Rendering), SSR(Server Side Rendering), ISR(Incremental Static Regeneration)입니다. 이 세 가지의 개념과, 이를 손쉽게 활용할 수 있는 Next.js 프레임워크를 알아봅니다.

1. CSR (Client Side Rendering)

• 전통적인 React 앱 방식 (Create React App 등)
• 모든 HTML 렌더링이 브라우저에서 JavaScript로 실행됨
• 초기 로딩이 느릴 수 있지만, 이후 화면 전환은 매우 빠름

장점: 빠른 사용자 경험 / 단점: SEO(검색엔진 최적화) 어려움

2. SSR (Server Side Rendering)

• 서버에서 HTML을 완성해서 브라우저에 전송
• Next.js에서 getServerSideProps() 함수로 구현
• 페이지마다 항상 서버에서 새로 렌더링

장점: SEO 최적화 용이, 초기 렌더링 빠름 / 단점: 서버 부하 증가

3. ISR (Incremental Static Regeneration)

• 정적인 페이지를 생성하되, 일정 주기로 백그라운드에서 업데이트
• getStaticProps() + revalidate로 구성
• Next.js의 고유 기능 중 하나

장점: 정적 페이지의 성능 + 실시간 데이터 갱신 / 단점: 일부 초기 요청은 오래 걸릴 수 있음

4. Next.js란?

• React 기반 프레임워크
• SSR, CSR, ISR, Static Generation 모두 지원
• 파일 기반 라우팅 시스템
• 이미지 최적화, 코드 분할, API 라우트 등 다양한 기능 제공

📦 설치

npx create-next-app my-app
cd my-app
npm run dev

📁 기본 폴더 구조

• pages/ 폴더 : 각 파일이 URL 경로가 됨
• public/ 폴더 : 정적 파일 위치
• styles/ : 전역 및 모듈 스타일

📘 기본 코드 예시

// pages/index.js export default function Home() { return ( <div> <h1>Welcome to Next.js!</h1> </div> ); }

📡 데이터 패칭 예시 (SSR)

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

✅ 언제 어떤 방식을 쓸까?

렌더링 방식	추천 상황
CSR	로그인 후 대시보드, 내부 관리 시스템
SSR	SEO가 중요한 뉴스/블로그 페이지
ISR	상품 상세, 공지사항 등 자주 업데이트되는 콘텐츠

💬 Next.js는 다양한 렌더링 방식을 지원하여 목적에 맞는 최적화된 웹을 만들 수 있습니다. 댓글로 여러분의 경험과 궁금한 점을 공유해 주세요!