Next.js 14부터 도입된 서버 액션(Server Actions)은 클라이언트에서 서버의 함수를 직접 호출할 수 있게 해주는 강력한 기능입니다.이 기능을 활용하면 별도의 API 라우트를 만들지 않아도 폼 제출을 통해 서버에서만 실행되는 비동기 함수를 호출할 수 있어 훨씬 간단하고 직관적인 개발이 가능합니다. 💡 서버 액션 기본 사용법export default function Page() { const saveName = async (formData: FormData) => { "use server"; const name = formData.get("name"); await saveDB({ name }); // ⓵ DB 함수 호출 await sql`INSERT INTO Nam..

Next.js에서는 HTML 스트리밍 기능을 통해 사용자에게 더 빠르고 부드러운 페이지 로딩 경험을 제공할 수 있습니다.이 게시물에서는 스트리밍이 무엇인지부터 Next.js에서의 사용법, 그리고 loading.tsx와 React.Suspense를 적절히 활용하는 방법까지 하나하나 예제를 통해 소개하겠습니다. ✅ 스트리밍(Streaming)이란?스트리밍은 서버에서 클라이언트로 데이터를 한번에 모두 전달하는 것이 아니라, 작게 나눈 데이터 조각을 순차적으로 전송하는 방식입니다.예를 들어, 서버에서 큰 데이터를 처리하거나 시간이 오래 걸리는 작업이 있다면, 그 작업이 끝나기를 기다리지 않고 준비된 부분부터 먼저 보내는 것이 스트리밍입니다. 덕분에 사용자는 모든 데이터가 준비되기 전에도 화면을 볼 수 있어서 ..

Next.js는 사용자 경험을 향상시키기 위해 다양한 최적화 전략을 제공합니다.그중 하나가 클라이언트 라우터 캐시(Client Router Cache)입니다.이번 포스트에서는 이 기능이 어떻게 동작하고, 어떤 상황에서 성능 향상에 기여하는지 살펴보겠습니다. 📍 클라이언트 라우터 캐시란?클라이언트 라우터 캐시는 브라우저 측에서 페이지 전환에 필요한 일부 데이터를 캐싱하여, 동일한 데이터를 반복해서 서버에 요청하지 않도록 하는 기능입니다. 이를 통해 페이지 전환 시 성능을 개선하고, 중복된 데이터 요청을 줄일 수 있습니다. 🔄 예시 시나리오사용자가 / (홈) 페이지에서 /search 페이지로 이동한다고 가정해봅시다.이 두 페이지는 RootLayout, SearchbarLayout 같은 공통 레이아웃 ..

Next.js에서는 각 페이지의 렌더링 방식을 정교하게 제어할 수 있는 설정들이 제공됩니다.그중 하나가 바로 export const dynamic 옵션입니다. 이 옵션은 해당 페이지를 강제로 Static 또는 Dynamic 페이지로 설정할 수 있게 해줍니다.즉, 내부에 동적 함수가 있는지, 캐시가 설정되어 있는지와 관계없이 명시적으로 렌더링 방식을 고정할 수 있습니다. 1. auto (기본값)export const dynamic = "auto";별도로 설정하지 않으면 기본값으로 사용됩니다.동적 함수 사용 여부, 데이터 캐시 설정 등을 바탕으로 Next.js가 페이지 유형을 자동으로 판단합니다.명시적으로 설정하지 않아도 자동 적용되므로 생략 가능하며, 일반적으로 가장 권장되는 방식입니다. 2. ..

Next.js는 페이지를 더 빠르게 전달하기 위해 다양한 캐싱 전략을 제공합니다.그중 풀 라우트 캐시(Full Route Cache)는 빌드 타임에 페이지를 미리 렌더링하고 저장해 두어, 요청 시 빠르게 응답할 수 있도록 해주는 강력한 기능입니다. 이 글에서는 풀 라우트 캐시의 개념, 적용 기준, 그리고 언제 사용하면 좋은지에 대해 자세히 알아봅니다. 💡 풀 라우트 캐시란 ?풀 라우트 캐시는 Next.js 서버가 빌드 시점(build time)에 특정 페이지의 렌더링 결과를 미리 생성해 저장해두는 기능입니다.예를 들어 /a 경로의 페이지가 풀 라우트 캐시에 포함되어 있다면, 서비스 중에 /a에 요청이 오더라도 새롭게 렌더링하지 않고, 미리 생성된 HTML을 그대로 응답합니다. 덕분에 매우 빠른 응답..

Next.js는 App Router 기반의 구조를 도입하면서 React Server Components를 지원하게 되었고, 이로 인해 데이터 패칭 방식에도 큰 변화가 생겼습니다. 여러 개의 서버 컴포넌트가 독립적으로 데이터를 요청하게 되면서, 하나의 페이지 내에서 동일한 API를 여러 번 호출하게 되는 경우가 잦아졌습니다. 이런 비효율을 방지하기 위해 Next.js는 Request Memoization이라는 기능을 제공합니다.이 기능이 어떻게 동작하는지, 그리고 기존의 데이터 캐싱과는 무엇이 다른지를 알아보겠습니다. 🚨 문제 상황 : 중복된 API 요청📦 Layout.tsx --> fetch("~/api/A")📦 Page.tsx --> fetch("~/api/A")📦 Sidebar.t..

1. 데이터 캐시 (Data Cache) 란?Next.js에서는 fetch 메서드를 사용할 때 데이터를 서버에 저장(캐시) 해두고, 이후 동일한 요청이 들어오면 다시 요청하지 않고 저장된 데이터를 반환합니다.이렇게 하면,불필요한 데이터 요청이 줄어든다.웹 서비스의 응답 속도가 개선된다. 캐싱은 fetch의 두 번째 인자로 옵션 객체를 전달함으로써 쉽게 설정할 수 있습니다. 데이터 캐시의 옵션들은 fetch가 아닌 axios 등의 다른 HTTP 리퀘스트 라이브러리에서는 활용될 수 없습니다.Next.js의 fetch는 브라우저의 기본 fetch와 달리 자체적인 캐싱 로직이 내장된 확장판이라는 생각하면 됩니다. 2. 캐시 옵션 정리아래는 fetch에 사용할 수 있는 대표적인 캐시 옵션 네 가지입니다. ⓵..

Next.js 13부터 도입된 App Router는 기존 Pages Router와는 다른 구조와 개념을 기반으로 동작합니다.특히 서버 컴포넌트(Server Component)가 도입되면서, 데이터 페칭 방식에도 큰 변화가 생겼습니다. 이번 글에서는 App Router 환경에서의 데이터 패칭 방식과 그 활용 방법에 대해 간단하게 정리해보았습니다. ✅ 서버 컴포넌트에서의 데이터 페칭App Router에서 새롭게 추가된 서버 컴포넌트는 서버에서만 실행되기 때문에, 컴포넌트 자체를 async 함수로 선언하고 fetch와 같은 비동기 로직을 직접 사용할 수 있습니다. 이처럼 서버 컴포넌트 안에서는 API 요청을 자유롭게 처리할 수 있으며, 이를 활용해 불필요한 props 전달을 줄이고, 보다 모듈화된 데이터 핸..

1. Server Component란 ?React Server Component(RSC)는 React 18부터 도입된 새로운 개념으로, 오직 서버 측에서만 실행되는 컴포넌트입니다.즉, 브라우저에서는 이 컴포넌트의 코드가 실행되지도, 전달되지도 않습니다. Next.js에서는 이 개념을 적극 활용하고 있으며, 특히 App Router 환경에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트로 동작합니다. 2. Server Component의 등장 배경기존 React에서는 모든 컴포넌트가 JavaScript 번들에 포함되어 브라우저로 전달되고, 이를 통해 Hydration이 이루어졌습니다.하지만 이 방식에는 비효율적인 부분이 있었습니다. 우리가 만든 컴포넌트 중에는 다음 두 가지가 존재합니다.상호작용이 필요한 ..