Next.js Discord

Discord Forum

UseState alternative on NextJS

Answered
Small Münsterländer posted this in #help-forum
Open in Discord
Small MünsterländerOP
So im using nextjs, ts, prisma and I am using SSR and App Dir.

I have a SSR page and the some tabs and some content on it (Bio, Charts, Match History)

Problem is I can't async await on client components, how should I manage state and still get the data fast from prisma?

https://www.prcl.dev/6flbo63v8kclp0g
Answered by Small Münsterländer
I did it, I just rewrote the whole page to a layout then for the tabs I used another slug (/players/[player_id]/[tab])

Then on the [tab] slug, I just pass down the tab props that is active as children.
Making most of the page SSR

Learned a lot today, params -> searchParams and more.

P.S: To those having the same issues as me, Just read the docs and follow the routing patterns
View full answer

25 Replies

Small MünsterländerOP
I tried doing this:
    const matches = async () => {
        let { playerMatches } = await getMatches(playerData?.player_id);

        return { matches: playerMatches };
    }

    console.log("ASYNC Matches:", JSON.stringify(matches))


but it only returns: undefined:
Anay-208
Why do you need to async await on client? get data from server side or api
you can use a useEffect hook to load it on client component
Small MünsterländerOP
The page itself is SSR
Tabs (red rectangle) are client components
Anay-208
Why do you need async await client
@Anay-208 Why do you need async await client
Small MünsterländerOP
To get the data from utils (prisma)
Anay-208
Get data on server
Do not get data on client side
Small MünsterländerOP
On server side, Im just doing it the usual way:
How would I handle state of the tabs?
Anay-208
You can pass this data to client if you want
Small MünsterländerOP
But the tab selection state?
@Small Münsterländer How would I handle state of the tabs?
Anay-208
you'll need a api route to get updated data
and fetch from client component
Small MünsterländerOP
Im using utils instead of api routes
Anay-208
Then you can "use server"; on utils and import it to client
Small MünsterländerOP
How would I handle caching:

export const getMatches = cache(async ({ p_id }: { p_id: any }) => {
    let matches = await prisma.matches.findMany({
        orderBy: [
            { tourney_date: "desc" },
        ],
        where: {
            // OR winner/loser
            OR: [
                { winner_local_id: p_id },
                { loser_local_id: p_id },
            ],
        },
    });

    return {playerMatches: matches};
})


Error: A "use server" file can only export async functions.
Read more: https://nextjs.org/docs/messages/invalid-use-server-value
Small MünsterländerOP
?
export async function getMatches({ p_id }: { p_id: any }) {
    let matches = await prisma.matches.findMany({
        orderBy: [
            { tourney_date: "desc" },
        ],
        where: {
            OR: [
                { winner_local_id: p_id },
                { loser_local_id: p_id },
            ],
        },
    });

    return { playerMatches: matches };
}
Anay-208
use unstable cache
Anay-208
If your query is resolved, mark the message which resolved your query!
Small MünsterländerOP
I did it, I just rewrote the whole page to a layout then for the tabs I used another slug (/players/[player_id]/[tab])

Then on the [tab] slug, I just pass down the tab props that is active as children.
Making most of the page SSR

Learned a lot today, params -> searchParams and more.

P.S: To those having the same issues as me, Just read the docs and follow the routing patterns
Answer