Je개발 일지

Next.js 는 렌더링 작업과 데이터 요청을 캐싱하여 애플리케이션의 성능을 향상시키고 비용을 절감한다. 이 페이지에서는 Next.js 의 캐싱 메커니즘, 이를 구성하는데 사용할 API, 그리고 이것들이 어떻게 상호작용하는지에 대해서 설명한다. 이 페이지는 Next.js 내부 작동 방식을 이해하는데 도움을 주되, Next.js 를 효과적으로 사용하기 위한 필수 지식은 아니다. Next.js 의 캐싱 휴리스틱은 대부분 API 사용에 의해 결정되며, 최소한의 구성으로도 최적의 성능을 제공하도록 기본 값이 설정돼 있다. 1. 개요 메커니즘 무엇을 어디서 목적 지속 시간 요청 Memoization 함수들의 반환 값 서버 React 컴포넌트 트리에서 데이터를 재사용 요청 수명 주기 당 데이터 캐시 데이터 서버 사..

React 애플리케이션을 빌드할 때 애플리케이션이 서버에서 렌더링돼야할지, 클라이언트에서 렌더링해야할지에 대한 고려를 해야 한다. 이 페이지에서는 서버 컴포넌트와 클라이언트 컴포넌트를 어느 때에 사용해야할지 몇가지 추천하는 복합 패턴들을 소개한다. 1. 서버 컴포넌트, 클라이언트 컴포넌트 사용 시기 요약 필요한 작업 서버 컴포넌트 클라이언트 컴포넌트 데이터 Fetching O X 백엔드 자원에 직접적으로 접근 O X 민감한 정보를 서버에서 유지 (Access Toiken, API Key 등) O X 서버에 의존성이 큰 경우와 클라이언트 사이드 JS 크기를 줄이고자 할 때 O X 상호작용 및 이벤트 리스너 추가 (onClick, onChange) X O 상태 및 생명주기 이펙트 사용 (useState, u..

클라이언트 컴포넌트를 사용하면 서버에서 사전에 렌더링된 UI 를 상호작용 가능하게 만들어주며 브라우저에서 클라이언트 JS 를 실행시킬 수 있다. 1. 클라이언트 렌더링의 장점 클라이언트에서 렌더링 작업을 수행하면 몇 가지 이점이 존재한다. 상호작용 : 클라이언트 컴포넌트는 상태, 효과, 이벤트 리스너를 사용할 수 있다. 따라서 사용자에게 즉각적인 피드백을 제공하고 UI 를 업데이트 할 수 있다. 브라우저 API : 클라이언트 컴포넌트는 브라우저 API 에 접근할 수 있다. 예를 들면, **geolocation** 이나 **localStorage** 등이 있다. 2. Next.js 에서 클라이언트 컴포넌트 사용하기 클라이언트 컴포넌트를 사용하기 위해서는 React 의 **use client** 디렉티브를 ..

React 서버 컴포넌트를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 UI 를 작성할 수 있다. Next.js 에서는 경로 Segement 별로 렌더링 작업을 추가로 분할해서 Streaming 과 부분 렌더링이 가능하게 한다. 서버 렌더링에는 세 가지 전략이 있다. 정적 렌더링 동적 렌더링 Streaming 이 페이지에서는 서버 컴포넌트가 어떻게 작동하는지, 언제 사용하는지와 다양한 서버 렌더링 전략에 대해 설명한다. 1. 서버 렌더링의 이점 서버 렌더링에서 렌더링 작업을 하면 여러 이점이 있다. (* 이점은 중요하니 공식문서와 다르게 소주제로 다룬다) 1-1) 데이터 가져오기 서버 컴포넌트를 사용하면 데이터 소스에 더 가까운 서버로 데이터를 가져올 수 있다. 렌더링에 필요한 데이터를 가져오..