세 줄 요약!1. 클라이언트 컴포넌트인데 인식을 못 하는 것 같은 오류가 뜸2. Recoil 과 Next.js 의 충돌3. Recoil 대신 Zustand 사용 상황평소에 사용했던 것처럼 recoil 라이브러리를 Install 하고 useRecoilState 사용했는데,서버 컴포넌트에서 hook을 사용했을 때 뜨는 오류가 출력됨환경: Next.js 15 + React 19 시도use client 지시자를 빼먹었는가?-> 첫 줄에 잘 넣어 둠 Root Layout에 Provider를 추가하지 않았는가?-> 추가함 결론Recoil 사용을 중단하고 Zustand를 사용함 이유일단 Next.js로 프로젝트를 진행하는 것 자체가 처음이었으므로 아무 생각 없이 install 하고 적용했는데, Next.js의 가장 ..

1. 커스텀 훅 (Custom Hook)React의 Hook을 조합해서 만든 함수 useState, useEffect 같은 기존 hook을 활용해 공통 로직을 재사용할 수 있게 도와준다.단순한 함수처럼 사용되어 JSX를 리턴하지 않는다. 2. HOC (Higher-Order Component, 고차 컴포넌트)컴포넌트를 인자로 받아서 새로운 컴포넌트를 리턴하는 함수 컴포넌트를 감싸서 기능을 추가하는 데 쓰인다.클래스형 컴포넌트에서 주로 사용되었으며, 최근에는 커스텀 훅이 더 많이 사용되는 추세다. 그럼 상황에 따라서 어떤 걸 선택해야 할까?API 데이터 패칭매번 useEffect, fetch 코드를 복사/붙여넣기 하는 건 비효율적이므로 커스텀 훅으로 로직을 분리하는 것이 유리하다. 로딩과 같은 공통 UI..

"use server" : 서버 액션 정의브라우저에서 호출되지만, 서버에서만 실제 실행되는 함수"use server";export async function createReviewAction(_: any, formData: FormData) { // ...} 주의사항・ use server는 반드시 지정된 위치에 선언→ 1. 분리된 파일인 경우 : 반드시 파일 맨 위에→ 2. 컴포넌트 안에 같이 정의된 경우 : 함수 안에서 선언 가능・ use client와 반대 개념으로, 클라이언트에서 트리거는 가능하지만 브라우저에서는 실행 안 됨→ 클라이언트에서는 서버 함수 실행 요청만 가능한 것 revalidatePath() : 페이지 캐시 재검증특정 페이지나 경로에 해당하는 풀 라우트 캐시를 삭제하고 다음 요청 시..

스트리밍이란?컴포넌트를 한 번에 렌더링하지 않고, 준비된 것부터 차례대로 렌더링하는 방식 기존 SSR(서버 사이드 렌더링)은 모든 데이터가 준비되어야 화면이 출력된다.스트리밍은 준비된 부분부터 점진적으로 보여 주기 때문에 체감 속도(perceived performance)가 훨씬 빠르다. Suspense로 스트리밍 적용하기Loading...}> fallback은 로딩 중 보여 줄 UI (*스켈레톤)내부 컴포넌트가 async거나 데이터 fetching 이 느릴 경우 자동적으로 스트리밍 분할된다. 주의사항1. 해당 경로 아래의 컴포넌트도 스트리밍된다.- /example 에 태그가 있을 경우, /example/setting도 영향을 받는다. 2. 모든 컴포넌트에 적용되지 않는다.- 비동기 컴포넌트(asy..

라우트 세그먼트 옵션, export const dynamic Next.js는 기본적으로 페이지의 동적 여부를 자동으로 판단하지만, 개발자가 직접 강제 설정할 수도 있다. 페이지의 동적 여부란? (dynamic page 와 static page) https://dazz6study.tistory.com/224 사용법page.tsx 혹은 layout.tsx 상단에 dynamic 코드를 기재한다.export const dynamic = "option"옵션옵션설명"auto"Next.js가 자동으로 동적 / 정적 여부 분석"force-dynamic"강제로 Dynamic Page 처리"force-static"강제로 Static Page 처리"error"동적 요소가 있으면 엄격하게 에러 발생 주의사항1. force-d..

먼저 알아야 할 개념Static Page 와 Dynamic PageNext.js에서는 각 페이지가 정적으로 생성될지, 요청마다 동적으로 렌더링될지 내부적으로 판단한다.조건결과동적 함수 사용 (cookies, headers 등)Dynamic Pagefetch() 에 no-store 또는 캐시 없음Dynamic Page그 외의 모든 경우Static Page Full Route Cache란?Static Page로 분류된 페이지는 빌드 타임 또는 요청 시 서버에서 생성되며,결과 HTML과 RSC Payload를 Full Route Cache에 저장한다.작동 방식1. 페이지가 처음 요청될 때 렌더링2. HTML과 RSC Payload가 Full Route Cache에 저장됨3. 이후 동일한 경로 요청 시 캐시된 ..

1. 데이터 캐싱 (Data Cache)fetch() 나 외부 API 요청 결과를 Next.js 자체적으로 저장해 두고, 다음 요청시 빠르게 응답하는 방식 목적서버 간 요청 횟수를 줄여 성능 최적화 동작 위치요청 응답이 서버에서 한번 반환되고 나면, 다음 요청에서는 메모리 / 파일 캐시에서 바로 반환 주요 캐싱 옵션옵션설명cache: 'no-store'항상 새로 요청, 캐싱 사용 안 함cache: 'force-cache'요청 결과 무조건 캐시next: { revalidate : N }N초마다 캐시 갱신next : { tags: [...] }태그 기반 수동 무효화* Next.js v15 기준 기본값은 no-store 이다.2. 요청 메모이제이션 (Request Memoization)서버 컴포넌트 환경에서는..

프리패칭(Prefetching)이란?사용자가 페이지를 방문하기 전에, 미리 다음 페이지의 데이터를 불러와 빠르게 이동시켜주는 기능 ・ 사용자는 클릭만 해도 페이지가 바로 뜨는 것처럼 느껴지며・ UX + 실제 체감 성능이 향상된다.프리패칭의 작동 방식조건설명 사용next/link를 통한 라우팅만 자동 프리패치뷰포트 진입해당 링크가 화면에 보여질 때만 prefetchprefetch 활성화기본값은 true로, 로 설정 가능페이지 타입별 프리패치1. 정적(static) 페이지/, /about, /contact 같이 빌드 타임에 페이지가 고정되어 있는 경우 내용이 고정되어 있기 때문에 Next.js는 해당 페이지의 JS(page.js)와 JSON 데이터(.json)을 만들어 둔다.이후 브라우저는 이 JS와 .j..

React Server Component란?서버에서만 실행되는 React 컴포넌트로, Node.js 환경에서만 실행되며 브라우저에는 렌더링 결과(HTML)와 필요한 데이터만 전송된다. ・ React의 컴포넌트 계층 내에서 서버 / 클라이언트 컴포넌트를 혼합해서 사용할 수 있고・ 데이터 페칭이나 DB 접근 등을 컴포넌트 내에서 직접 수행할 수 있게 된다.서버 컴포넌트 사용시 주의해야 할 점1. 서버 컴포넌트에는 브라우저 코드 사용 금지서버에서만 실행되기 때문에 브라우저 전용 API나 기능은 사용할 수 없다. 2. 클라이언트 컴포넌트는 서버에서도 한 번 실행클라이언트 컴포넌트는 서버에서 한 번, 클라이언트에서 또 한 번 실행된다.클라이언트 컴포넌트라고 해서 클라이언트에서만 실행되는 것이 아니다.서버 측에서 ..

1. 기본 동적 라우팅 [param]대괄호 [] 를 사용하여 동적 세그먼트를 정의한다.// app/example/[id]/page.tsximport { useParams } from 'next/navigation';export default function ExamplePage() { const params = useParams(); return {params.id};} /example 로 시작하는 동적 경로는 모두 해당 파일로 매칭된다.ex) /example/1, /example/abc... 2. 모든 세그먼트 대응 [...param]파라미터가 여러 개일 경우 배열로 수집한다.// app/example/[...id]/page.tsximport { useParams } from 'next/naviga..