Look, if you use, for example, one of the dynamic functions (cookies, header) in the server component, then it will be dynamically assembled on the server?
#Dynamic react server component
clever pelican
gaunt pastureBOT
Hi @clever pelican. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you're correct. In Next.js, dynamic functions such as cookies() and headers() rely on information that can only be known at request time. If you use these dynamic functions in a Server Component, the whole route will be opted into dynamic rendering at request time. This means that the component will be assembled on the server dynamically for each request [source (https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-functions)].
Here's an example of how you can use the cookies() function in a Server Component:
import { cookies } from 'next/headers'
export async function GET(request: Request) {
const cookieStore = cookies()
const token = cookieStore.get('token')
return new Response('Hello, Next.js!', {
status: 200,
headers: { 'Set-Cookie': `token=${token.value}` },
})
}
In this example, the GET function is a Server Component that reads a cookie named 'token' and sets it in the response headers [source (https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-functions)].
However, be aware that using dynamic functions will opt a route out of the Full Route Cache, meaning the route will be dynamically rendered and not cached [source (https://nextjs.org/docs/app/building-your-application/caching#dynamic-functions)]. Also, if you use dynamic functions in the Root Layout, it will opt your whole application into Dynamic Rendering [source (https://nextjs.org/docs/app/building-your-application/deploying/production-checklist#routing-and-rendering)].
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
clever pelican
@gaunt pasture no i mean react server component
gaunt pastureBOT
Let me check the knowledge base for you. One moment! :books:
Yes, React Server Components in Next.js can be used to perform server-side operations such as handling cookies or headers. When you use these operations in a Server Component, they are executed on the server during the rendering process.
React Server Components are rendered into a special data format called the React Server Component Payload (RSC Payload). This payload is a compact binary representation of the rendered React Server Components tree, which is used by React on the client to update the browser's DOM. The RSC Payload contains the rendered result of Server Components, placeholders for where Client Components should be rendered and references to their JavaScript files, and any props passed from a Server Component to a Client Component [source (https://nextjs.org/docs/app/building-your-application/rendering/server-components#how-are-server-components-rendered)].
However, it's important to note that React Server Components are not meant to directly handle request-specific data like cookies or headers. These are typically handled in Next.js using Route Handlers or API routes. If you need to use request-specific data in your Server Components, you should fetch that data in your Route Handler or API route and pass it as props to your Server Component.
Remember that using dynamic data in your Server Components can affect caching and performance. For example, if a Server Component depends on dynamic data, it cannot be statically rendered and must be rendered on the server for each request. This can impact performance and prevent the rendered result from being cached [source (https://nextjs.org/docs/app/building-your-application/rendering/server-components)].