1 / 2
Next.js 16: SSR과 CSR의 상태 관리 비교 실습
대상 Next.js App Router, TypeScript, Server/Client 컴포넌트,
useState,Link를 이미 아는 학생목표 동일한 UI에서 SSR과 CSR의 상태 관리 방식을 코드로 구현하고,
searchParams가 Promise인 이유, 쿼리스트링의 필요성, SEO적 이유를 이해한다완성물
app/step1/ssr.tsx와app/step1/csr.tsx두 페이지
준비물
- Next.js 16 프로젝트 (App Router, TypeScript 설정 완료)
- Newtil CSS가 설치되어 있어야 합니다. (
npm install newtil-css) app/layout.tsx에 Newtil CSS가 import되어 있어야 합니다.
STEP 1 / 9공통 UI 구조 이해하기
0개 완료 · 9개 남음
우리는 좌측에 카테고리 목록, 우측에 항목 목록과 페이지네이션이 있는 레이아웃을 만들 것입니다. 이 레이아웃은 SSR과 CSR 페이지에서 동일하게 사용됩니다. 먼저 이 구조가 왜 중요한지, 그리고 Newtil CSS의 어떤 클래스를 사용할지 확인해 볼게요.
1-1. 레이아웃 구조 분석
우리가 만들 UI는 다음과 같은 구조입니다:
- 좌측 (Sidebar): 카테고리 목록 (예: 전체, 프론트엔드, 백엔드, 디자인)
- 우측 (Main):
- 상단: 현재 선택된 카테고리 제목
- 중간: 해당 카테고리의 항목 목록 (예: "React 기초", "Next.js 실습" 등)
- 하단: 페이지네이션 버튼 (이전, 다음, 현재 페이지 표시)
이 구조는 "필터(카테고리)"와 "데이터(목록)"의 관계입니다. SSR에서는 이 필터 상태가 URL에 담기고, CSR에서는 메모리(
useState)에 담깁니다.✅ 확인
- 여러분은 이제 "좌측 카테고리, 우측 목록+페이지네이션"이라는 UI 구조를 머릿속에 그릴 수 있어야 합니다.
- Newtil CSS의 기본 유틸리티 클래스가 무엇인지 확인했습니다.