Integrating Next js with external backend.

Question

I have a question. Most of the time, I use Next.js as a frontend framework because, in my agency, we don't have enough full-stack developers. Most of us are either frontend or backend developers, not both. So, when I integrate Next.js with the backend via APIs, I need the user data on each route, page, or request. Currently, what I'm doing is fetching data on each page where I need it by encapsulating the data fetching logic from the backend in server actions. You could say this is a data layer for me, and I also have the authorization logic here.

But I have a few concerns. Should I store the user data in the frontend cookies too, or should I always get the data from the backend on each request? I can get the data from the cookies and use React Cache for more optimization, but in my case, users can log in on multiple devices. The backend stores the token with the operating-related info in the database, working like session storage. If I implement the approach to get user data from the cache, it could be problematic. For example, a user could log out from device A using device B, but device B will still try to get the token from the cookies where it exists and can use that without knowing that the user has logged out.

What is your suggestion for my problem?

Transvaal lion · Answer

I've done it like this in a recent project:
In the root layout I am fetching the user with a plain fetch and passing the result to a user provider

// Root layout
export default async function RootLayout({ children }: { children: React.ReactNode }) {

    const user = await getCurrentUser() // Hitting tRPC endpoint to get user from DB via sessionId in cookie

    return (
        <html>
            <head></head>
            <body>
                <TrpcProvider>
                    <UserProvider defaultUser={user}>
                        {children}
                    </UserProvider>
                </TrpcProvider>
            </body>
        </html>
    )
}

// UserProvider
interface UserProviderProps {
    children: React.ReactNode
    defaultUser: Public_User_Me_Payload | null | undefined
}

export const UserProvider = ({ children, defaultUser }: UserProviderProps) => {

    const result = trpc.public.user.me.useQuery(undefined, {
        initialData: defaultUser
    })

    const value = {
        user: result.data || defaultUser,
        isLoading: result.isFetching || result.isLoading,
        error: result.error,
        refetch: result.refetch,
    }

    return (
        <UserContext.Provider value={value}>
            {children}
        </UserContext.Provider>
    )
}

Integrating Next js with external backend.

2 Replies