키모스토리

아래 내용은 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..