Hi @little gazelle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Using async in server components.
humble socketBOT
Yes, you can use async in your page.tsx component in the app directory. This is a feature of Next.js's Server Components. Here's an example from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-4-migrating-pages):
async function getPosts() {
const res = await fetch('<https://...'>)
const posts = await res.json()
return posts
}
export default async function Page() {
// Fetch data directly in a Server Component
const recentPosts = await getPosts()
// Forward fetched data to your Client Component
return <HomePage recentPosts={recentPosts} />
}
In your case, you can fetch your approvedEvents and currentUser data directly in the Server Component:
async function getEvents() {
// Your logic to fetch events
}
async function getCurrentUser() {
// Your logic to fetch current user
}
export default async function Home() {
const approvedEvents = await getEvents();
const currentUser = await getCurrentUser();
// Your logic to use the fetched data
}