스트리밍이란?컴포넌트를 한 번에 렌더링하지 않고, 준비된 것부터 차례대로 렌더링하는 방식 기존 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..

Next.js 13 이후 도입된 App Router로, 파일 시스템 기반 라우팅을 담당한다. /app ├── layout.tsx # 공통 레이아웃 ├── page.tsx # '/' 경로 (홈 페이지) ├── about │ └── page.tsx # '/about' 경로 ├── blog │ ├── page.tsx # '/blog' 경로 │ └── [id] │ └── page.tsx # 동적 경로: '/blog/:id' └── not-found.tsx # 404 페이지 react-router-dom 에서 사용하던 router 가 Next.js 에서는 필요하지 않다.Next.js 는 파일 시스템을 기반으로 라우팅하기 때문에, 파일 경로가 곧 ..

1. Hydration서버에서 렌더링된 HTML을 클라이언트에서 JavaScript와 연결하여 인터랙티브한 웹 페이지로 만드는 과정 SSR (서버 사이드 렌더링) 된 HTML 은 정적인 상태이므로, JavaScript 없이 동적인 동작을 할 수 없다. 예를 들어, 버튼을 클릭할 때마다 숫자가 올라가는 간단한 이벤트가 있는 웹 페이지가 있다고 가정해 보자.이 경우 버튼과 카운팅이 계산될 숫자는 렌더링되어 사용자에게 보이지만,버튼을 클릭해도 아무런 이벤트가 발생하지 않는 것이다. 클라이언트에서 JavaScript가 실행되면서 인터랙티브한 기능을 추가해 주는데,서버에서 렌더링된 HTML을 재사용하여 React 컴포넌트와 연결한다.2.  주요 기본 파일들2-1. page각 라우트에 대응하는 페이지 컴포넌트로, ..

TypeScript 를 어느 정도 잘 사용할 수 있겠다는 생각이 들어서, 이제는 다음 스텝인 Next.js 공부를 시작했다.Next.js 프레임워크의 가장 큰 특징 중 하나인 SSR 에 대해 헷갈려서 정리해 보기로...!종류설명SSR (Server Side Rendering)서버에서 렌더링CSR (Client Side Rendering)클라이언트에서 렌더링 1. SSR (서버 사이드 렌더링)서버에서 HTML을 만들어서 클라이언트로 전송한다. 작성한 코드를 서버에서 HTML로 변환한 뒤, 브라우저에 렌더링하는 동안 JavaScript를 로드하여 인터랙티브한 웹을 완성한다.이는 기존 React의 전통적인 방식인 CSR 를 짚고 나면, 더 잘 이해할 수 있다.2. CSR (클라이언트 사이드 렌더링)서버에서 H..