Hi @lusty cedar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#getServerSideProps + App Directory
mighty cedarBOT
Yes, in the app directory, you can use the new read-only functions to retrieve request data, similar to how you would use getServerSideProps in the pages directory.
The app directory exposes two new functions: headers() and cookies(). These functions are based on the Web Headers API and the Web Cookies API respectively, and can be used inside Server Components to retrieve request headers and cookies.
Here's an example of how you can use these functions:
// `app` directory
import { cookies, headers } from 'next/headers'
async function getData() {
const authHeader = headers().get('authorization')
return '...'
}
export default async function Page() {
// You can use `cookies()` or `headers()` inside Server Components
// directly or in your data fetching function
const theme = cookies().get('theme')
const data = await getData()
return '...'
}
In this example, headers().get('authorization') is used to retrieve the authorization header, similar to how you would use req.getHeaders()['authorization'] in getServerSideProps in the pages directory. Similarly, cookies().get('theme') is used to retrieve the theme cookie, similar to how you would use req.cookies['theme'] in getServerSideProps in the pages directory.
You can find more information about this in the Next.js documentation (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
lusty cedar
@mighty cedar This is not valid because I need interactivity on the page and the example provided is for Server Components.
mighty cedarBOT
Let me check the knowledge base for you. One moment! :books:
I apologize for the confusion. You're correct that the headers() and cookies() functions are used with Server Components, which are not interactive.
In the app directory, data fetching is built on top of fetch() and async React Server Components. You can use the fetch() function with different cache options to control how the data is fetched. For example, you can use cache: 'no-store' to indicate that the fetched data should never be cached, similar to getServerSideProps in the pages directory.
Here's an example:
export default async function Page() {
// This request should be refetched on every request.
// Similar to `getServerSideProps`.
const dynamicData = await fetch(`<https://...`,> { cache: 'no-store' })
return <div>...</div>
}
In this example, fetch() is used with cache: 'no-store' to fetch data that should be refetched on every request, similar to how you would use getServerSideProps in the pages directory.
However, please note that this approach does not provide the same level of control as getServerSideProps. If you need to perform server-side computations or access the request object directly, you might still need to use getServerSideProps in the pages directory.