5. Edge and Node.js RuntimesNext.js의 Context에서 Runtime은 코드의 실행 중 사용할 수 있는 라이브러리, API, 일반적인 함수 기능을 의미.Server에서는 2가지 runtime이 있다.Node.js Runtime : 기본 실행환경으로 모든 Node.js API와 호환 패키지에 접근할 수 있다.Edge Runtime : Web API를 기반으로하는 실행환경. 5-1. Runtime DifferencesRuntime을 선택할 때, 많은 부분을 고려해야 한다. 주요 차이점은 아래와 같다.1.Edge RuntimeNode.js API의 하위집합인 경량화된 실행 환경.동적이거나 개인화된 컨텐츠를 낮은 지연 시간으로 제공하는 간단한 함수에 적합하다.리소스를 최소한으로 사용..

4. Composition PatternsReact 애플리케이션을 만들 때, 어떻게 구분하여 Server 혹은 Client에 렌더링할 지 고려해야 한다.Server Components와 Client Components의 여러 조합 패턴을 소개한다. 4-1. When to use Server and Client ComponentsServer Components: Data Fetch, backend 리소스 접근, 민감한 정보 숨기기, 서버에 종속이 되어 있고 Client의 Javascript 번들 크기를 줄이고 싶을 때.Client Components: 상호작용성과 Event listener가 있을 때, state와 effect 등 hook을 사용할 때, browser API가 필요할 때, state와 ef..

3. Client ComponentsClient Components는 Server에서 사전에 렌더링되고 브라우저에서 Javascript를 실행 시킬 수 있는 상호 작용 가능한 UI를 만들 수 있게 한다. 3-1. Benefits of Client Rendering상호 작용성 : Client Components는 state, effects, event listener 등을 사용할 수 있다. 이는 사용자에게 즉각적인 피드백과 UI 제공이 가능하다는 의미.Browser API : Client Components는 Browser API에 접근이 가능하다. (localStorage, geolocation 등..) 3-2. Using Client Components in Next.js"use client" 지시어를..

2. Server ComponentsReact Server Components는 렌더링할 수 있고 선택적으로 Server에서 캐싱할 수 있는 UI를 만들 수 있게 한다.Next.js에서는 route segnets로 분할 되어 Streaming, 부분 렌더링을 지원한다.Server 렌더링 전략으로 3가지가 있다.Static RenderingDynamic RenderingStreaming 2-1. Benifits of Server RenderingData FetchingServer Components는 Data fetching을 서버에서 data source와 가깝게 수행할 수 있다.이는, 렌더링에 필요한 데이터를 fetching하는 데 있어서 시간과 Client의 요청 수를 줄이고 성능을 향상 시킬 수 있..

1. RenderingRendering은 작성한 코드가 UI로 변환되는 과정을 의미.React와 Next.js는 코드가 Server 혹은 Client에서 렌더링될 수 있는 하이브리드 웹 애플리케이션을 지원.1-1. Fundamentals시작하기에 앞서, 익숙해지면 좋은 web의 기본적인 컨셉.코드가 실행될 수 있는 환경은 Server와 Client이다.사용자가 방문하거나 상호작용을 통해 요청과 응답 생명주기가 시작된다.네트워크 경계를 통해 Server와 Client 코드를 구분한다.1. Rendering Environments웹 애플리케이션에서 Client와 Server에서 렌더링이 가능하다.Client는 애플리케이션 코드에 대한 요청을 서버로 보내고 UI를 받는 사용자 장치의 브라우저를 의미.Serve..

3. Data Fetching Patterns and Best PracticesReact와 Next.js에서 추천할 만한 Data Fetching 방법을 소개한다.아주 일반적인 패턴을 어떻게 사용하는 지 소개한다.3-1. Fetching data on the Server가능하면, Server Componente와 함께 Server에서 Data fetching 하는 것을 추천한다.database와 같이 backend resources에 직접 접근이 가능.Client에 민감한 정보를 노출시키지 않아 보안 향상.data fetch와 render를 Server에서 함께 수행하면, client와 server 사이의 이동이 줄어들기 때문에 성능 우수.Client에서 요청마다 data fetch하는 대신 Server..

2. Server Actions and MutationsServer Actions는 Server에서 실행되는 비동기 함수를 의미.Server Components, Client Componenets에서 사용될 수 있으며, 폼 제출, Mutations 처리 등을 한다.2-1. Convention비동기 함수 내부의 최상단 또는 분리된 파일 내 최상단에 "use server" 지시어로 Server Actions를 정의할 수 있다.1. Server Components// Server Componentexport default function Page() { // Server Action async function create() { 'use server' // ... } return ( ..

1. Data Fetching, Caching, and RevalidatingData Fetching은 application에서 가장 중요한 부분이다.Data Fetching을 위한 4가지 방법.Server에서 fetch 사용Server에서 third-party libraries 사용 (ex. axios)Client에서 Route Handler 사용Client에서 third-party libraries 사용 (ex. swr, react-query)1-1. Server에서 fetch 사용.Next.js에서는 Web API의 fetch를 확장해서, 각 요청마다 caching과 revalidating 설정을 할 수 있도록 제공.React Component tree가 렌더링 될 때, 동일한 API 요청에 대해선..

14. InternationalizationNext.js는 다국어를 지원한다.14-1. 용어Locale : 언어 및 서식 설정에 대한 식별자로, 사용자의 언어와 지리적 가능성을 포함.en-US : 미국식 영어nl-NL : 네덜란드식 네덜란드어nl : 일반 네덜란드어14-2. Routing브라우저 상의 사용자 기본 언어 설정을 선택하는 것이 베스트. 언어 정보가 변경되면 Accept-Language header에 정보가 담긴다.import { match } from '@formatjs/intl-localematcher'import Negotiator from 'negotiator' let headers = { 'accept-language': 'en-US,en;q=0.5' }let languages = n..

13. MiddlewareMiddleware는 요청이 완료되기 전에 코드를 실행시킬 수 있는 환경을 제공한다.사용자 요청을 기반으로 응답을 재작성하거나, request or response header를 수정하거나 바로 응답하는 등의 작업이 가능하다.Caching Content와 Route가 발생하기 전에 실행된다.13-1. Use Cases사용하면 좋은 경우.인증 및 인가 : Route handler or Page에 접근하기 전에 session cookies를 확인하여 사용자 신원에 대한 인증 및 인가.Server Side Redirect : Server Level에서 조건에 따라 사용자를 Redirect.Path 재생성 : A/B Test, 신규 기능 적용, legacy path 변경 등 요청 정보에..