Cannot access session/user data from staticly generate pages in nextjs 13
Answered
Param san posted this in #help-forum
I making an ecommerce site, I have made SSG product pages for faster speeds. So for the cart option we need to have cookies but generateStaticParams restricts the use of it. And I have to store user id to the cart too.
Please suggest any work around?
Please suggest any work around?
Answered by fuma
As above mentioned, it's impossible to keep it fully static.
Basically, in your use case, your app can't be fully static due to personalized data.
Then, how to keep it fast while it is a dynamic route (rendered at request time)? Cache, You can cache the product data.
Hence, you won't have to re-fetch the data every time the user enters your site.
Basically, in your use case, your app can't be fully static due to personalized data.
Then, how to keep it fast while it is a dynamic route (rendered at request time)? Cache, You can cache the product data.
Hence, you won't have to re-fetch the data every time the user enters your site.
18 Replies
@Param san I making an ecommerce site, I have made SSG product pages for faster speeds. So for the cart option we need to have cookies but generateStaticParams restricts the use of it. And I have to store user id to the cart too.
Please suggest any work around?
there is no workaround. if you need dynamic data its not a static page.
I want to understand it for the same question I had before.
As above mentioned, it's impossible to keep it fully static.
Basically, in your use case, your app can't be fully static due to personalized data.
Then, how to keep it fast while it is a dynamic route (rendered at request time)? Cache, You can cache the product data.
Hence, you won't have to re-fetch the data every time the user enters your site.
Basically, in your use case, your app can't be fully static due to personalized data.
Then, how to keep it fast while it is a dynamic route (rendered at request time)? Cache, You can cache the product data.
Hence, you won't have to re-fetch the data every time the user enters your site.
Answer
@fuma As above mentioned, it's impossible to keep it fully static.
Basically, in your use case, your app can't be fully static due to personalized data.
Then, how to keep it fast while it is a dynamic route (rendered at request time)? Cache, You can cache the product data.
Hence, you won't have to re-fetch the data every time the user enters your site.
I am new to app router but I understood caching is the way to keep it fast, but I don't particularly know how to cache only the product data,
is it related to this
is it related to this
no, go to the cache section. Next.js only caches
fetch by default.@fuma no, go to the cache section. Next.js only caches `fetch` by default.
I am using Supabase's js lib which I don't think can handle cache the way
The thing I am looking for is performant nextjs page with static like speed.
fetch handles. So if you read image below, it says it is related to route segment config.The thing I am looking for is performant nextjs page with static like speed.
And imo,
export const dynamic="auto" No, auto is just the default behaviour. By default, your page is cached and statically generated. You can try testing it locally.
For now, you can’t cache third party libraries.
unstable_cache is not yet stable@fuma For now, you can’t cache third party libraries. `unstable_cache` is not yet stable
Yea, 🥲 I read it there. Eagerly waiting for it.
Only dynamic, you can’t cache it since you are reading cookies (as you mentioned)
These are dynamic functions
@fuma Only dynamic, you can’t cache it since you are reading cookies (as you mentioned)
I want to ask one more question, Can I make an API endpoint and send the cart data to the db that way?
Not encouraged because that can cause error during pre-rendering
When Next.js builds your app, route handlers won’t be available
@fuma Not encouraged because that can cause error during pre-rendering
If you see this code, I am sending recieved data to the db successfully too for signing up the user.