Need Help with Next.js Caching to Optimize Bandwidth on Vercel and Supabase
Unanswered
Mackenzie River Husky posted this in #help-forum
Mackenzie River HuskyOP
Hi everyone!
I would like to ask for your help regarding Next.js caching. I've watched several videos and thoroughly gone through the Next.js documentation, but I still don't fully understand how it works and what I should do to optimize bandwidth. The site receives very few visits, around 10-30 people daily. It's hosted on Vercel, and my Fast Origin Transfer is around 2-3 GB per month, which seems inexplicably high to me.
The images are quite optimized.
To give you more details, it's a food ordering website I created for my girlfriend's parents, and I'm using Supabase with it, which makes the Next.js documentation even less clear to me.
Here’s the website, unfortunately, it’s only in Hungarian: rockfood83.hu
The main issue is that it seems to frequently re-fetch the food data and images, even if the page is not reloaded. Why is this happening? How is this usually optimized?
I attached images about my code snippets. (page.tsx file looks like for the menu route, middleware, supabas middleware)
Thank you very much in advance if anyone can help.
I would like to ask for your help regarding Next.js caching. I've watched several videos and thoroughly gone through the Next.js documentation, but I still don't fully understand how it works and what I should do to optimize bandwidth. The site receives very few visits, around 10-30 people daily. It's hosted on Vercel, and my Fast Origin Transfer is around 2-3 GB per month, which seems inexplicably high to me.
The images are quite optimized.
To give you more details, it's a food ordering website I created for my girlfriend's parents, and I'm using Supabase with it, which makes the Next.js documentation even less clear to me.
Here’s the website, unfortunately, it’s only in Hungarian: rockfood83.hu
The main issue is that it seems to frequently re-fetch the food data and images, even if the page is not reloaded. Why is this happening? How is this usually optimized?
I attached images about my code snippets. (page.tsx file looks like for the menu route, middleware, supabas middleware)
Thank you very much in advance if anyone can help.
5 Replies
The supabase middleware code is not visible properly. Can you upload it again?
Also, can you tell me if it's necessary to keep your homepage dynamic? Can't you make it static?
Also, can you tell me if it's necessary to keep your homepage dynamic? Can't you make it static?
Mackenzie River HuskyOP
Of course, I uploaded it here, here's the link:
https://drive.google.com/file/d/1fhAkLACtLImQvgRZQ29BPZE6UWpZohNz/view?usp=sharing
Well, actually, there are burgers at the bottom of the homepage that change slightly every month. But how could I make them static? Thanks in advance for your helpfulness!
https://drive.google.com/file/d/1fhAkLACtLImQvgRZQ29BPZE6UWpZohNz/view?usp=sharing
Well, actually, there are burgers at the bottom of the homepage that change slightly every month. But how could I make them static? Thanks in advance for your helpfulness!
@Mackenzie River Husky Hi everyone!
I would like to ask for your help regarding Next.js caching. I've watched several videos and thoroughly gone through the Next.js documentation, but I still don't fully understand how it works and what I should do to optimize bandwidth. The site receives very few visits, around 10-30 people daily. It's hosted on Vercel, and my Fast Origin Transfer is around 2-3 GB per month, which seems inexplicably high to me.
The images are quite optimized.
To give you more details, it's a food ordering website I created for my girlfriend's parents, and I'm using Supabase with it, which makes the Next.js documentation even less clear to me.
Here’s the website, unfortunately, it’s only in Hungarian: rockfood83.hu
The main issue is that it seems to frequently re-fetch the food data and images, even if the page is not reloaded. Why is this happening? How is this usually optimized?
I attached images about my code snippets. (page.tsx file looks like for the menu route, middleware, supabas middleware)
Thank you very much in advance if anyone can help.
Turkish Van
I might be wrong but, If You decide to stick with
Since You are using
Also, using
If the case is not about the facts stated above, and it is just something else triggering data to be re-fetched multiple times, I would need to see a bit more of the code to assist further.
Supabase, it's impossible for any page, any route, it's used in, or any data fetch to be cached automatically.Since You are using
Supabase auth feature, there is an auth check running on every request to database. That auth check, reads cookies which leads to making page/route not being cached.Also, using
searchParams will opt the page into dynamic rendering at request time anyways.If the case is not about the facts stated above, and it is just something else triggering data to be re-fetched multiple times, I would need to see a bit more of the code to assist further.
Mackenzie River HuskyOP
Sorry for replying only now. First of all, thanks for the help. I'm sad to hear that it's not possible. Are you sure there's no way around it? It seems quite a limited solution if Supabase only allows SSR from the various rendering types in Next.js.
@Mackenzie River Husky Sorry for replying only now. First of all, thanks for the help. I'm sad to hear that it's not possible. Are you sure there's no way around it? It seems quite a limited solution if Supabase only allows SSR from the various rendering types in Next.js.
Turkish Van
I might be wrong, but there might be a way to manually cache it using
Since You are using their
If there is a way to cache it, I would also like to know!
React Query.Since You are using their
auth feature, You want to check if user has access to wanted content every time he tries to access it. Following that, there must be a part which checks if the user is authorized which leads to it not being able to be cached.If there is a way to cache it, I would also like to know!