Data Fetching
Although it's possible to fetch data in Client Components, we recommend fetching data in Server Components unless you have a specific reason for fetching data on the client. Moving data fetching to the server leads to better performance and user experience.

Learn more about data fetching.

Context
Most React applications rely on context to share data between components, either directly via createContext, or indirectly via provider components imported from third-party libraries.

In Next.js 13, context is fully supported within Client Components, but it cannot be created or consumed directly within Server Components. This is because Server Components have no React state (since they're not interactive), and context is primarily used for rerendering interactive components deep in the tree after some React state has been updated.

We'll discuss alternatives for sharing data between Server Components, but first, let's take a look at how to use context within Client Components.

Using context in Client Components
All of the context APIs are fully supported within Client Components:

app/sidebar.js
'use client';

import { createContext, useContext, useState } from 'react';

const SidebarContext = createContext();

export function Sidebar() {
 const [isOpen, setIsOpen] = useState();

 return (
 
 
 
 );
}

function SidebarNav() {
 let { isOpen } = useContext(SidebarContext);

 return (
 
 Home

 {isOpen && }
 
 );
}
However, context providers are typically rendered near the root of an application to share global concerns, like the current theme. Because context is not supported in Server Components, trying to create a context at the root of your application will cause an error:

app/layout.js
import { createContext } from 'react';

// 🔴 createContext is not supported in Server Components
const ThemeContext = createContext();

export default function RootLayout({ children }) {
 return (
 
 
 
 {children}
 
 
 
 );
}
To fix this, create your context and render its provider inside of a Client Component:

app/theme-provider.js
'use client';

import { createContext } from 'react';

const ThemeContext = createContext();

export default function ThemeProvider({ children }) {
 return (
 
 {children}
 
 );
}
Your Server Component will now be able to directly render your provider since it's been marked as a Client Component:

app/layout.js
import ThemeProvider from './theme-provider';

export default function RootLayout({ children }) {
 return (
 
 
 {children}
 
 
 );
}
With the provider rendered at the root, all other Client Components throughout your app will be able to consume this context.

Note: You should render providers as deep as possible in the tree – notice how ThemeProvider only wraps {children} instead of the entire document. This makes it easier for Next.js to optimize the static parts of your Server Components.

Rendering third-party context providers in Server Components
Third-party npm packages often include Providers that need to be rendered near the root of your application. If these providers include the "use client" directive, they can be rendered directly inside of your Server Components. However, since Server Components are so new, many third-party providers won't have added the directive yet.

If you try to render a third-party provider that doesn't have "use client", it will cause an error:

app/layout.js
import { ThemeProvider } from 'acme-theme';

export default function RootLayout({ children }) {
 return (
 
 
 {/\* 🔴 Error: `createContext` can't be used in Server Components \*/}
 {children}
 
 
 );
}
To fix this, wrap third-party providers in your own Client Component:

app/providers.js
'use client';

import { ThemeProvider } from 'acme-theme';
import { AuthProvider } from 'acme-auth';

export function Providers({ children }) {
 return (
 
 
 {children}
 
 
 );
}
Now, you can import and render directly within your root:

import { Providers } from './providers';

export default function RootLayout({ children }) {
 return (
 
 
 {children}
 
 
 );
}
With the providers rendered at the root, all the components and hooks from these libraries will work as expected within your own Client Components.

Once a third-party library has added "use client" to its client code, you'll be able to remove the wrapper Client Component.

Sharing data between Server Components
Since Server Components are not interactive and therefore do not read from React state, you don't need the full power of context to share data. You can use native JavaScript patterns like global singletons within module scope if you have common data that multiple Server Component need to access.

For example, a module can be used to share a database connection across multiple components:

utils/database.js
export const db = new DatabaseConnection(...);
app/users/layout.js
import { db } from "@utils/database";

export async function UsersLayout() {
 let users = await db.query(...);
 // ...
}
app/users/[id]/page.js
import { db } from "@utils/database";

export async function DashboardPage() {
 let user = await db.query(...);
 // ...
}
In the above example, both the layout and page need to make database queries. Each of these components shares access to the database by importing the @utils/database module.

Sharing fetch requests between Server Components
When fetching data, you may want to share the result of a fetch between a page or layout and some of its children components. This is an unnecessary coupling between the components and can lead to passing props back and forth between components.

Instead, we recommend colocating data fetching alongside the component that consumes the data. fetch requests are automatically deduped in Server Components, so each route segment can request exactly the data it needs without worrying about duplicate requests. Next.js will read the same value from the fetch cache.
아타 불러오기클라이언트 컴포넌트에서 데이터를 가져올 수 있지만 클라이언트에서 데이터를 가져와야 하는 특별한 이유가 없는 한 서버 컴포넌트에서 데이터를 가져오는 것이 좋습니다. 데이터 가져오기를 서버로 옮기면 성능과 사용자 경험이 향상됩니다.데이터 가져오기에 대해 자세히 알아보세요.컨텍스트대부분의 React 애플리케이션은 컨텍스트에 의존해 컴포넌트 간에 데이터를 공유하는데, 이는 createContext를 통해 직접적으로 또는 타사 라이브러리에서 가져온 공급자 컴포넌트를 통해 간접적으로 이루어집니다.Next.js 13에서 컨텍스트는 클라이언트 컴포넌트 내에서 완벽하게 지원되지만 서버 컴포넌트 내에서 직접 생성하거나 사용할 수는 없습니다. 그 이유는 서버 컴포넌트에는 (인터랙티브하지 않기 때문에) React state가 없고, 컨텍스트는 주로 일부 React state가 업데이트된 후 트리 깊숙한 곳에 있는 인터랙티브 컴포넌트를 다시 렌더링하는 데 사용되기 때문입니다.서버 컴포넌트 간에 데이터를 공유하기 위한 대안은 나중에 논의하겠지만, 먼저 클라이언트 컴포넌트 내에서 컨텍스트를 사용하는 방법을 살펴봅시다.클라이언트 컴포넌트에서 컨텍스트 사용하기모든 컨텍스트 API는 클라이언트 컴포넌트 내에서 완벽하게 지원됩니다:app/sidebar.js'use client';'react'에서 { createContext, useContext, useState }를 임포트합니다;const SidebarContext = createContext();export 함수 Sidebar() { const [isOpen, setIsOpen] = useState(); return (    );}함수 SidebarNav() { let { isOpen } = useContext(SidebarContext); return (  Home {isOpen && }  );}그러나 컨텍스트 공급자는 일반적으로 현재 테마와 같은 글로벌 관심사를 공유하기 위해 애플리케이션의 루트 근처에서 렌더링됩니다. 컨텍스트는 서버 컴포넌트에서 지원되지 않으므로 애플리케이션의 루트에서 컨텍스트를 만들려고 하면 오류가 발생합니다:app/layout.js'react'에서 { createContext }를 가져옵니다;// 🔴 createContext는 서버 컴포넌트에서 지원되지 않습니다.const ThemeContext = createContext();export default function RootLayout({ children }) { return (    {children}    );}이 문제를 해결하려면 컨텍스트를 생성하고 클라이언트 컴포넌트 내에서 해당 프로바이더를 렌더링하세요:앱/테마-프로바이더.js'use client';'react'에서 { createContext }를 임포트합니다;const ThemeContext = createContext();export default 함수 ThemeProvider({ children }) { return (  {children}  );}이제 서버 컴포넌트가 클라이언트 컴포넌트로 표시되었으므로 프로바이더를 직접 렌더링할 수 있습니다:app/layout.js'./theme-provider'에서 테마 프로바이더를 임포트합니다;export default function RootLayout({ children }) { 반환 (   {children}   );}프로바이더가 루트에서 렌더링되면 앱의 다른 모든 클라이언트 컴포넌트가 이 컨텍스트를 사용할 수 있습니다.참고: 프로바이더는 트리에서 가능한 한 깊숙이 렌더링해야 합니다. 테마 프로바이더가 전체 문서가 아닌 {children}만 래핑하는 것을 주목하세요. 이렇게 하면 Next.js가 서버 컴포넌트의 정적 부분을 더 쉽게 최적화할 수 있습니다.서버 컴포넌트에서 서드파티 컨텍스트 공급자 렌더링하기타사 npm 패키지에는 애플리케이션 루트 근처에서 렌더링해야 하는 프로바이더가 포함되어 있는 경우가 많습니다. 이러한 공급자가 "use client" 지시문을 포함하는 경우 서버 컴포넌트 내부에서 직접 렌더링할 수 있습니다. 그러나 서버 컴포넌트는 매우 새롭기 때문에 많은 서드파티 공급자가 아직 이 지시문을 추가하지 않았을 것입니다."use client"가 없는 서드파티 공급자를 렌더링하려고 하면 오류가 발생합니다:app/layout.js'acme-theme'에서 { ThemeProvider }를 가져옵니다;export default function RootLayout({ children }) { return (   {/\* 🔴 오류: 서버 컴포넌트 \*/}에서 `createContext`를 사용할 수 없습니다. {children}   );}이 문제를 해결하려면 서드파티 공급자를 자체 클라이언트 컴포넌트에서 래핑하세요:app/providers.js'클라이언트 사용';'acme-theme'에서 { ThemeProvider }를 임포트합니다;'acme-auth'에서 { AuthProvider }를 임포트합니다;export 함수 Providers({ children }) { return (   {children}   );}이제 루트 내에서 직접 임포트하고 렌더링할 수 있습니다:'./providers'에서 { Providers }를 가져옵니다;export default function RootLayout({ children }) { 반환 (   {children}   );}루트에서 렌더링된 프로바이더를 사용하면 이러한 라이브러리의 모든 컴포넌트와 후크가 자체 클라이언트 컴포넌트 내에서 예상대로 작동합니다.타사 라이브러리가 클라이언트 코드에 "use client"를 추가하면 래퍼 클라이언트 컴포넌트를 제거할 수 있습니다.서버 컴포넌트 간 데이터 공유서버 컴포넌트는 인터랙티브하지 않으므로 React 상태에서 읽지 않으므로 데이터를 공유하기 위해 컨텍스트의 모든 기능이 필요하지 않습니다. 여러 서버 컴포넌트가 액세스해야 하는 공통 데이터가 있는 경우 모듈 범위 내에서 전역 싱글톤과 같은 네이티브 자바스크립트 패턴을 사용할 수 있습니다.예를 들어 모듈을 사용하여 여러 컴포넌트에서 데이터베이스 연결을 공유할 수 있습니다:utils/database.jsexport const db = new DatabaseConnection(...);app/users/layout.js"@utils/database"에서 { db }를 가져옵니다;내보내기 비동기 함수 UsersLayout() { let users = await db.query(...); // ...}app/users/[id]/page.jsimport { db } 