Next.js Discord

Discord Forum

'getSession()' confusion: I want to use ISR (next : { revalidate: 10 } ).

Answered
Swyftey posted this in #help-forum
Open in Discord
Avatar
SwyfteyOP
Hi!

I want my Next.JS website to majorly run on the server-side. My goal is to use the 'getSession' function within the header component (once on every page load) and somehow pass that session data around to the rest of the components on the page (on the server side).

This is the getSession function:

 public static getSession = async (sessionCookie: SessionCookie | undefined) => {
        try {
            const response: Response = await fetch(`${process.env.API_URL}/auth/session`, {
                method: "GET",
                headers: {
                  authorization: `Bearer ${apiKey}`,
                  Cookie: `${sessionCookie?.name}=${sessionCookie?.value}`
                },
                next: { revalidate: 10 }
            });

            if (!response.ok) throw new Error("Could not fetch session data.");

            return await response.json();
        } catch (error: any) {
            throw new Error('Error fetching session data');
        }
    };


Could somebody please provide me with a simple example on how I should go about this?

Thanks for any help!
Answered by Double-striped Thick-knee
well, cached function isn't going to cache your fetch calls, it will only cache the function for that single request. in this context it's only useful if you want to share data between components. if you refresh the page, it will reset the cached function. so if you want to cache your fetch calls then that's another thing.
View full answer

12 Replies

Avatar
Double-striped Thick-knee
you can wrap the getSession function inside reacts cache function and then use it in different server components.

import { cache } from "react"
import {getSession} from ".."

export const getCachedSession = cache(getSession)
it won't refetch
Avatar
SwyfteyOP
Thank you for the answer! So, if I am getting this right, I should put this (
export const getSession = cache(getSession)
in one component (such as the header) and I can use that with the other components?
Avatar
Double-striped Thick-knee
you could export it from a separate file and use it in server components.
Avatar
SwyfteyOP
Ok, I see. My only concern is, does the cache from cache(getSession) reset after every page reload? So, for example, it will be called once and the new session data will return depending on if the request needs to be revalidated
Avatar
Double-striped Thick-knee
yeah. the use of cached function is so that you can call this function inside different server components without refething database. for example you can import this cached function inside your header, layout.tsx, page.tsx etc but it will only fetch the data once. it's a workaround to share data between server components.
Avatar
SwyfteyOP
This is what GPT is saying:
Image
Whoops, didn't see your reply
I see. So, then there is no need for next: revalidate then?
Avatar
Double-striped Thick-knee
well, cached function isn't going to cache your fetch calls, it will only cache the function for that single request. in this context it's only useful if you want to share data between components. if you refresh the page, it will reset the cached function. so if you want to cache your fetch calls then that's another thing.
Answer
Avatar
SwyfteyOP
I see. That makes more sense.
Thank you!