Server components

[slim topaz]

Hi @buoyant plank. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

[buoyant plank]

i got this but as im using react-query in client comp, doing "prisma.user." (im using contentful btw) will probably exposes my API keys client side, and I don't want this, thats why I was trying to fetch my next.js API routes (server side)

[slim topaz]

Sorry @buoyant plank, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

[dusty root]

In client components there’s nothing wrong with fetching your own api routes

[buoyant plank]

ok because right now my client comp look like this

'use client'

async function getEvent(slug: string) {
    const res = await fetch(`/api/events/${slug}`, {
        method: 'GET'
    });
    return res.json();
}

export default function Event({ params }: { params: { event: string } }) {
    const slug = params.event;

    const { data: event } = useQuery({
        queryKey: ['event', slug],
        queryFn: () => getEvent(slug),
    });

  [...]
}

[dusty root]

Perfectly fine, nothing wrong with this

[buoyant plank]

even with the 'use client' at the top ? im getting confused 😵‍💫

[dusty root]

“use client” makes the component a client component, then it works just like a normal react component

What are you confused at?

[buoyant plank]

this example from the doc confused me about async await use in component
https://beta.nextjs.org/docs/data-fetching/fetching#asyncawait-in-server-components

[dusty root]

With the proposed React RFC, you can use async and await to fetch data in Server Components.