Dynamic Metadata and NextJS 13
Unanswered
Pacific herring posted this in #help-forum
Pacific herringOP
Hi ! I need help about metadata. Im doing have this (with Supabase for the backend) :
But for user page, Im fetching data from api, but how uptdate this data after ? like if the user change his full name, the metadata title should change but it wasnt
export async function generateMetadata({
params,
}: {
params: { username: string };
}) {
const { data: user } = await supabase.from('user').select('*').eq('username', params.username).single();
if (!user) {
return {
title: 'User not found !',
};
}
return {
title: `${user.full_name} (@${user.username})`,
description: `This is the page of @${user.username}`,
};
}But for user page, Im fetching data from api, but how uptdate this data after ? like if the user change his full name, the metadata title should change but it wasnt
54 Replies
you should either refresh the page after change of name (router.refresh()) or [this](https://nextjs-faq.com/metadata-client-components#how-do-i-set-dynamic-metadata-that-depends-on-client-side-states) where you add it to the body... i would say the first is way better (andthis is asuming you want to change the title of paye when they update name on the same site)
@riský you should either refresh the page after change of name (router.refresh()) or [this](<https://nextjs-faq.com/metadata-client-components#how-do-i-set-dynamic-metadata-that-depends-on-client-side-states>) where you add it to the body... i would say the first is way better (andthis is asuming you want to change the title of paye when they update name on the same site)
Pacific herringOP
Thx for your help ! Even with router.refresh data dont change... There is an example :
Ive change the user full_name but the metadata title still being the previous one 

does doing a full refresh work?
by pressing the browser refresh button
@Clown does doing a full refresh work?
Pacific herringOP
same, the metadata dont change. Also I have a layout.tsx who check if the user exist, well if I change the existing username by a random one, the metadata title gonna give the old metada title of the old user page. THe only way to refresh the page and have the new metadata is by deleting the next folder ahah
iirc, that shouldnt be happening with generateMetadata
are you exporting this metadata per page?
@Clown are you exporting this metadata per page?
Pacific herringOP
what do you mean by exporting per page ?
@Pacific herring what do you mean by exporting per page ?
are you using
generateStaticParams in this page?try adding this line
in this page
export const dynamic = "force-dynamic"in this page
and then check if it works as expected
@@ts-ignore try adding this line
ts
export const dynamic = "force-dynamic"
in this page
Pacific herringOP
ohh its working with that
I never use generateStaticParams I guess :/
generateStaticParams is to pre render certain routes
I am using them to render profile routes when site is built
@@ts-ignore I am using them to render profile routes when site is built
Pacific herringOP
But if the user change his username, the route gonna change no ?
@Pacific herring But if the user change his username, the route gonna change no ?
The usernames are unique in my application
you can't change it
Pacific herringOP
Okay I see
But in my case this shoudnt happen right ?
I dont know why I need to add the dynamic variable
using const dynamic = 'force-dynamic' will cause all data to be fetched at request time, and the segment to be rendered dynamically.
@@ts-ignore > using const dynamic = 'force-dynamic' will cause all data to be fetched at request time, and the segment to be rendered dynamically.
Pacific herringOP
Yeah but by default it should be the case no ?
@Pacific herring Yeah but by default it should be the case no ?
nextjs caches the data
@@ts-ignore nextjs caches the data
Pacific herringOP
So for route who need to be revalidate we need to add the
const dynamic = 'force-dynamic' ?I just to know if there is something wrong in my app
@Pacific herring So for route who need to be revalidate we need to add the `const dynamic = 'force-dynamic'` ?
or export a revalidate constant to revalidate it after a certain interval
let me write that correctly
Force dynamic just means the data will be re-fetched each request
However you dont always need that. Things like fetch revalidation can work without that force-dynamic
so just mix and match where needed
@Clown However you dont always need that. Things like fetch revalidation can work without that force-dynamic
Pacific herringOP
Well Im kinda lost (so sry Im not very familiar with next), so why In my case the only way to make my page revalidate the new data is using the
force-dynamic way@Pacific herring Well Im kinda lost (so sry Im not very familiar with next), so why In my case the only way to make my page revalidate the new data is using the `force-dynamic` way
you can generate the route staticly and revalidate it when data is changed
if you don't want this dynamic variable exported
@@ts-ignore if you don't want this dynamic variable exported
Pacific herringOP
use the
dynamicvariable dont brother me but I just want to dot it in the right way (if its the right way wlel Im gonna use it). But how can I revalidate the data without adding dynamic variable ?you can call
revalidatePath or revalidateTag@riský you can call `revalidatePath` or `revalidateTag`
Pacific herringOP
But I dont understand what the utility of using generateMetadata if by default it does not revalidate the data
you can either disable cache or manualy revalidate it
@riský you can either disable cache or manualy revalidate it
Pacific herringOP
What the common way for a social media app 😅 ? Because if NextJs cache everything I need to add this forcedynamic in a lot of page
i would say that manually revalidating pages (like when edit page) is better than checking db every time
@riský i would say that manually revalidating pages (like when edit page) is better than checking db every time
Pacific herringOP
Yeah, so if for example user is inside his settings
/settings/profile, he update his profile and go to his profile pae /@username, so when saving his new profile in the setting page I have to add a line for revalidatePath ?yeah
but i would say to these optimisations at the end of your project - like i personaly just have it no caching and do it as one of the last things (because everything can change quickly)
Pacific herringOP
Okay so I probably need to disable cache for the entire project during dev and before production make these optimisations with caching ?
when you use
next dev, caching is already disabledbut yeah
but i would also say don't wait too long, when you have decided on how things should really work, you can implement it (its also about not spending effort of that until more end where you try and finalise project)
@riský when you use `next dev`, caching is already disabled
Pacific herringOP
That weird because im using
npx next dev and metadata never updateI guess there is another problem because isnt normal that my profile page are not updated when refreshing the page even in dev mode
Pacific herringOP
Damn Im become grazy with that. My previous setup (with Appwrite against Supabase) was working for the metadata when refreshing, but nothing has changed apart from the requests to the backend
Pacific herringOP
Okay Ive put a appwrite request against my supabase request and its working so the problem come from supabase but damn that doesnt make sense