키모스토리

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..

generateStaticParams / dynamicParams 정리 (App Router)1) 언제 필요한가요?App Router에서 폴더명을 대괄호로 감싸면 동적 세그먼트(Dynamic Segment)를 만들 수 있습니다.app/blog/[slug]/page.tsx → /blog/a, /blog/b 처럼 slug가 바뀌는 라우트app/shop/[...slug]/page.tsx → /shop/a/b/c 처럼 catch-all 라우트 (slug는 배열)app/shop/[[...slug]]/page.tsx → /shop도 매칭되는 optional catch-all (slug가 undefined 가능) Next.js문제는 “가능한 slug가 몇 개인지 / 언제 알 수 있는지”입니다.이때 등장하는 것이 ge..

RSC 렌더링과 Static/Dynamic Rendering 정리 (App Router)1) 먼저 용어부터: “RSC”와 “Static/Dynamic”은 다른 축입니다RSC(React Server Components)컴포넌트를 서버에서 실행/렌더링할 수 있게 해주는 React의 컴포넌트 모델입니다. Next.js App Router에서는 page/layout이 기본적으로 Server Component입니다. Next.js+1Static Rendering / Dynamic Rendering“서버에서 렌더링을 언제 하느냐 + 그 결과를 캐시하느냐”의 문제입니다.즉, RSC를 쓰더라도 어떤 라우트는 **정적(빌드/재검증 시점)**으로, 어떤 라우트는 **동적(요청 시점)**으로 동작합니다. Next.js+12..

Next.js v16(App Router 기준) Route definition파일 시스템 기반 라우팅: app/ 아래 폴더 = route segment, URL 경로로 매핑됩니다. Next.js+1해당 세그먼트를 실제로 공개 라우트로 만들려면 보통 그 폴더 안에 page.tsx가 필요합니다(= 그 경로가 “페이지”로 노출). Next.js+1기본 패턴 예:app/page.tsx → /app/profile/page.tsx → /profilePages and layoutspage.tsx: 해당 경로의 화면(페이지) 를 정의합니다. Next.jslayout.tsx: 하위 페이지/레이아웃을 감싸는 공통 UI 쉘입니다(헤더/푸터/사이드바). 네비게이션 시 상태를 유지하며 지속(persist) 됩니다. Next...

1) 개념: “Middleware”와 “Proxy”는 뭐가 다른가요?공통점(역할은 동일)둘 다 요청이 페이지/라우트 핸들러로 도착하기 전에 서버(주로 Edge)에서 먼저 실행되어,redirect / rewrite요청/응답 헤더 수정요청을 차단하고 직접 응답 반환같은 “문지기(게이트)” 역할을 합니다. Next.js차이점(Next.js 16에서 이름/컨벤션이 변경)Next.js 16부터 기존 middleware.ts 파일 컨벤션이 deprecated 되었고, proxy.ts로 이름이 변경되었습니다. (기능이 바뀐 게 아니라 “명명/컨벤션”이 바뀐 것) Next.js+2Next.js+2Next.js 16 블로그에서도 middleware.ts는 당장은 동작하지만 deprecated이며, 미래 버전에서 제거될 ..

Next.js의 “라우트 핸들러(Route Handler)”의 캐싱 동작 특성 현재시간을 출력해 주는 API 응답을 이용하여, 캐싱 동작 확인import { NextResponse } from "next/server";// 응답 캐쉬를 STATIC으로(갱신안함) ⚙️ Next.js 캐시 정책 요약 (v15/v16 기준)항목기본 캐시 동작강제 설정비고Page (page.tsx)Staticexport const dynamic = "force-dynamic" 으로 변경 가능서버컴포넌트 SSR/SSG 제어용Route Handler (route.ts)Dynamicexport const dynamic = "force-static" 으로 캐시 시도 가능, 단 요청 의존 시 무시됨API 응답용fetch() 호출기본 S..

1) Route Handler에서 Header 읽기: 2가지 방법A. NextRequest로 읽기 (가장 직관적)request.headers.get("authorization")이 방식은 “지금 들어온 요청 객체”에서 바로 읽습니다. export async function GET(request: NextRequest) { const auth = request.headers.get("authorization");}B. next/headers의 headers()로 읽기const headerList = await headers(); headerList.get(...)Next 15+에서는 headers()가 비동기(await 필요) 입니다. nextjs.org+1headers()로 받은 객체는 읽기 전용입니다..

URL Query ParametersGET 요청시 검색처리 (url query parameters)export async function GET(request: NextRequest) { const searchParams = request.nextUrl.searchParams; const query = searchParams.get("query"); const filteredComments = query ? comments.filter((comment) => comment.text.includes(query)) : comments; return Response.json(filteredComments);} GET 요청 방법 (?query=검색어)http://localhost:3000/co..