키모스토리

Next.js 16(App Router) + Prisma v7 + SQLite 기준으로설치 → DB 생성(migrate) → seed 목록/상세 CRUD UI → 캐시/ISR(revalidate) 전략 + Data Fetching 패턴 비교까지 한 번에 들어있는 예제입니다.Prisma v7 변경점: schema.prisma의 datasource.url 제거 + prisma.config.ts로 이동.Next 16 변경점: revalidateTag(tag, profile) 형태로 2번째 인자가 필요Server Action에서는 즉시 반영용 updateTag 권장Next.js+4Prisma+4Prisma+40) 전제Node 런타임에서 Prisma를 사용합니다(Edge 런타임 X).패키지 매니저는 pnpm 기..

Data Fetching Pattern 정리Sequential Data Fetching vs Parallel Data Fetching (Server Component 기준)Next.js(App Router)의 Server Component 환경에서는 fetch()를 서버에서 실행할 수 있고, 그 결과를 JSX로 바로 렌더링할 수 있습니다.이때 “여러 데이터를 가져오는 방식”은 크게 두 가지 패턴으로 설명할 수 있습니다.Sequential Data Fetching(순차 요청): A를 받은 후 B를 요청Parallel Data Fetching(병렬 요청): A/B/C를 동시에 요청 후 결과를 모아서 렌더링아래는 jsonplaceholder API를 활용한 실습 예제를 기준으로 각각을 설명합니다.1) Sequ..

Next.js(App Router) 렌더링 완전 정리 (RSC 중심) — Static/Dynamic/Streaming/컴포지션 패턴까지 (v16 기준)이 글은 Next.js App Router(최신 v16 계열) 기준으로, “왜 이 페이지는 즉시 뜨지?”, “어떤 순간에 동적 렌더링이 되지?”, “RSC에서 Client/Server 컴포넌트는 어떻게 섞어야 하지?” 같은 렌더링 관련 핵심을 한 번에 정리한 포스팅입니다.1) RSC(React Server Components) 관점에서 “렌더링”을 다시 보기App Router에서 page / layout은 기본이 Server Component입니다. 즉, “일단 서버에서 렌더링 가능한 건 서버에서” 처리하고, 필요한 부분만 클라이언트로 내려보내는 구조가 기..

Interleaving Server and Client Components (Next.js App Router)App Router에서는 page.tsx, layout.tsx가 기본적으로 Server Component입니다.브라우저 상호작용(상태, 이벤트, 브라우저 API)이 필요할 때만 파일 상단에 'use client'를 붙여 Client Component 경계(boundary) 를 만듭니다.핵심 규칙은 2줄로 요약됩니다.Server Component는 Server/Client를 모두 import 가능Client Component는 Client만 import 가능 (Server import 불가)이 규칙을 바탕으로, 요청하신 4가지 케이스를 정리합니다.1) Client Component 내에서 다른 C..

아래 내용은 Next.js App Router(v15~v16) 기준으로, react-slick 같은 서드파티 UI 패키지를 “클라이언트 라우트(=Client Component 영역)”와 “서버 라우트(=Server Component/Route Handler 영역)”에서 안전하게 쓰는 패턴 + Context Providers까지 한 번에 정리한 글입니다.1) “서드파티 UI 패키지”는 어디에서 써야 하나?App Router에서 page.tsx / layout.tsx는 기본이 Server Component입니다. 서버 컴포넌트는 DB 접근/시크릿 사용/JS 번들 감소/스트리밍에 유리하고, 브라우저 API나 상호작용이 필요하면 Client Component를 섞어서 씁니다. Next.js따라서 서드파티 패키지..

1) Streaming이란?기본 SSR은 “데이터 다 받고 → HTML 만들고 → 내려보내고 → Hydration”이 순차(블로킹) 로 진행돼서, 느린 데이터 하나가 있으면 페이지 전체가 늦어질 수 있습니다. Next.js의 Streaming은 HTML을 작은 청크로 나눠 준비되는 부분부터 점진적으로 전송해, 사용자가 더 빨리 화면을 보기 시작하도록 만드는 방식입니다. Next.jsStreaming은 React의 와 결합되어 “fallback UI를 먼저 보여주고 → 준비되면 교체”하는 흐름으로 동작합니다. Next.js+1또한 App Router에서 페이지/레이아웃은 기본적으로 Server Component이며, 서버에서 렌더링된 결과를 (필요하면 캐시하고) 클라이언트로 스트리밍할 수 있습니다. Ne..