전체 글 (32) [6주 차] Caching in Next.js NextJS에는 캐시와 관련된 4가지 핵심 요소들이 존재한다. 랜더링 중 동일한 요청을 방지하는 Request Memoization, 서버에서 가져온 데이터를 저장하는 Data Cache, 서버에서 프리랜더링 된 결과물을 캐싱하는 Full Route Cache, 클라이언트 측에서 방문한 페이지를 저장하는 Router Cache가 있다.특정 페이지를 방문하여 랜더링할 때 호출되는 API가 존재한다면, 이는 Data Source에서 데이터를 가져오면서 Request Memoization과 Data Cache에 데이터를 저장한다. 랜더링 되는 동안에는 Request Memoization 캐시 사용하여 여러번 호출되지 않는다. 랜더링이 종료되면 Request Memoization은 비워진다.다른 페이지로 이동했.. [5주 차] Server and Client Composition Patterns React 애플리케이션을 구축할 때, 어떤 부분을 서버에서 렌더링하고 어떤 부분을 클라이언트에서 렌더링할지 결정하는 것이 중요하다. 이를 위해 서버 컴포넌트와 클라이언트 컴포넌트를 적절히 구성하는 패턴을 이해해야 한다.데이터를 가져오거나 백엔드 리소스에 직접 접근해야 할 때, 엑세스 토큰이나 API 키 같은 민감한 정보를 서버에 유지하고자 할 때, 클라이언트 측 JavaScript 양을 줄이고자 할 때는 서버 컴포넌트를 사용한다.onClick, onChange와 같은 이벤트 리스너를 추가하여 상호작용을 구현할 때, useState(), useEffect()와 같은 React 훅을 사용하여 상태 관리나 생명주기 메서드를 활용할 때, 브라우저 전용 API를 사용해야 할 때는 클라이언트 컴포넌트를 사용한다. .. [5주 차] Server Components Server Components을 이용한 서버 랜더링의 이점데이터 페칭: Server Componets를 사용하면 데이터 페칭을 서버에서 수행할 수 있다. 이렇게 하면 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트가 해야 하는 요청 수를 줄여 성능을 개선할 수 있다.보안: Server Componets를 사용하면 토큰과 API 키 같은 중요한 데이터와 로직을 클라이언트에 노출시키지 않고 서버에 보관할 수 있다. 이를 통해 보안 위험을 줄일 수 있다.캐싱: 서버에서 렌더링하면 결과를 캐싱하여 후속 요청과 사용자 간에 재사용할 수 있다. 이렇게 하면 각 요청에서 수행되는 렌더링 및 데이터 페칭 양을 줄여 성능을 개선하고 비용을 절감할 수 있다.성능: UI의 비대화형 부분을 Server Com.. [4주 차] Patterns and Best Practices 서버에서 데이터 가져오기Next.js에서는 가능한 한 데이터를 서버에서 패칭하는 것을 권장한다. 서버에서 데이터를 패칭하면 API 키, 인증 정보가 클라이언트에 노출되지 않으며, 클라이언트에서 요청을 보내는 시간을 절약할 수 있다. // app/page.tsx (Server Component)export default async function Page() { const res = await fetch('https://api.example.com/data') const data = await res.json() return {JSON.stringify(data, null, 2)}} 데이터 캐싱 및 중복 요청 방지fetch 요청은 자동으로 캐싱(memoization)된다. 즉, 같은 데이터를 여러 .. [4주 차] Server Action NextJS에서 Server Actions는 서버에서 실행되는 비동기 함수로, 클라이언트와 서버 컴포넌트에서 데이터 변경(Mutation)과 폼 제출(Form Submission)을 효율적으로 처리할 수 있다. use server 키워드를 사용하여 간편하게 서버에서 실행되는 함수를 정의할 수 있으며, 클라이언트 컴포넌트와 서버 컴포넌트에서 모두 사용할 수 있다.// 서버 컴포넌트에서 사용 방법'use server'export default function Page() { async function create() { 'use server' // 데이터 저장 또는 처리 로직 } return Create}// 클라이언트 컴포넌트에서 사용 방법// app/actions.ts'use server.. [4주 차] Data Fetching, Caching, and Revalidating Data Fetching은 모든 애플리케이션의 핵심이다. NextJS에서 데이터를 가져오는 방법은 fetch, Route Handler, 타사 라이브러리 등이 있다. 서버에서 fetch 사용NextJS는 기본 fetch Web API를 확장해, 서버의 fetch 요청에 대한 Caching 및 Revalidating 동작을 사용할 수 있게 한다. 또한, 리액트 컴포넌트 트리를 랜더링 하는 동안 fetch 요청을 Memoize한다. fetch를 async/await와 함께 서버 컴포넌트에서 사용할 수 있다.// 서버 컴포넌트 export default async function Page() { const data = await getData() return }// 데이터를 불러오는 함수async func.. [3주 차] Middleware 미들웨어는 요청이 완료되기 전에 코드를 실행할 수 있도록 해준다. 이를 통해 들어오는 요청을 기반으로 응답을 수정할 수 있으며, Rewriting, Redirecting, 응답 헤더 수정, 직접 응답 반환과 같은 작업을 수행할 수 있다. 미들웨어는 캐시된 콘텐츠나 라우트가 매칭되기 전에 실행된다. 미들웨어는 Edge 런타임만 지원한다. Node.js 런타임에서는 사용할 수 없지만, 미들웨어가 실행될 때, Next.js는 자동으로 Edge Runtime에서 실행되도록 설정된다. 주요 활용 사례인증 및 권한 관리: 사용자를 확인하고 세션 쿠키를 검사하여 특정 페이지나 API 경로에 대한 접근을 제어한다.서버 사이드 리디렉션: 사용자의 로케일, 역할, 로그인 상태 등에 따라 서버에서 직접 redirect 처리.. [3주 차] Route Handlers Route Handlers를 사용하면, 특정 경로에 대한 사용자 정의 Next Server API를 생성할 수 있다. 웹 요청인 Request와 Response API로 이를 구현하며, app 디렉토리 내에서만 사용할 수 있다. 만약 app/api/example/route.ts안에 Route Handler 함수를 생성한다면, '/api/example'이 Next Server API의 주소가 된다. 참고로, Route Handler는 RRequest Memoization를 할 수 없다. Best Practices// app/api/example/route.tsimport { NextRequest, NextResponse } from 'next/server';// 외부 API 기본 URLconst BASE_.. 이전 1 2 3 4 다음