뉴렉처

뉴렉처

로그인

공유된 따라하기 · 넥스트JS

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개 남음

  1. 우리는 좌측에 카테고리 목록, 우측에 항목 목록과 페이지네이션이 있는 레이아웃을 만들 것입니다. 이 레이아웃은 SSR과 CSR 페이지에서 동일하게 사용됩니다. 먼저 이 구조가 왜 중요한지, 그리고 Newtil CSS의 어떤 클래스를 사용할지 확인해 볼게요.

    1-1. 레이아웃 구조 분석

    우리가 만들 UI는 다음과 같은 구조입니다:

    image

    • 좌측 (Sidebar): 카테고리 목록 (예: 전체, 프론트엔드, 백엔드, 디자인)
    • 우측 (Main):
      • 상단: 현재 선택된 카테고리 제목
      • 중간: 해당 카테고리의 항목 목록 (예: "React 기초", "Next.js 실습" 등)
      • 하단: 페이지네이션 버튼 (이전, 다음, 현재 페이지 표시)

    이 구조는 "필터(카테고리)"와 "데이터(목록)"의 관계입니다. SSR에서는 이 필터 상태가 URL에 담기고, CSR에서는 메모리(useState)에 담깁니다.

    ✅ 확인

    • 여러분은 이제 "좌측 카테고리, 우측 목록+페이지네이션"이라는 UI 구조를 머릿속에 그릴 수 있어야 합니다.
    • Newtil CSS의 기본 유틸리티 클래스가 무엇인지 확인했습니다.

이 주소는 글의 저작자가 공개한 링크입니다. 뉴렉처 스터디의 다른 자료는 로그인 후 볼 수 있어요.