Next js content not being updated on page visit
Unanswered
SharpieMaster posted this in #help-forum
SharpieMasterOP
Why does the small delay occur when I load between when i load the page and when the content updates, I am using next/link <Link></Link>
55 Replies
SharpieMasterOP
Giant panda
i'm guessing that value that is delayed is in a client component whereas all the info otherwise available is from server
so delay is due to hydration , maybe
SharpieMasterOP
do you need any specific files?
like the components?
Giant panda
the 2 is the delay you are talking about right ?
SharpieMasterOP
the 2
the Change
and the Change again but on the edit-recipe page
Giant panda
okay so both must be using state
and would be client component , right ?
SharpieMasterOP
"use client";
import Link from "next/link";
import { api } from "~/trpc/react";
import { VscLoading } from "react-icons/vsc";
const RecipeDisplay = () => {
const recipes = api.recipe.getMine.useQuery().data;
return recipes ? (
<>
<div className="w-full px-4">
<div className="mx-auto mb-6 flex max-w-[900px] flex-wrap items-center justify-evenly gap-2 gap-y-4 rounded-2xl border p-4">
{recipes.length > 0 ? (
recipes.map((recipe) => (
<Link
key={recipe.id}
href={`/edit-recipe/${recipe.id}`}
className="cursor-pointer rounded-2xl bg-zinc-100 p-4 hover:opacity-75"
>
<h1 className="unselectable px-6 text-xl">
{recipe.title}
</h1>
{/* <div className="mx-auto mt-2 h-[1px] w-4/5 bg-zinc-200"></div> */}
</Link>
))
) : (
<h1 className="text-xl text-zinc-500">
No recipes here...
</h1>
)}
</div>
</div>
</>
) : (
<div className="px-4">
<div className="mx-auto flex max-w-[900px] items-center justify-center rounded-2xl border p-4 py-12">
<VscLoading className="animate-spin" size={34} />
</div>
</div>
);
};
export default RecipeDisplay;this is the recipe display
the thing above the new recipe button
This is the edit recipe form
Giant panda
so i would suggest you to do this : open your network tab and see the html document that is coming with the request
if everything apart from the delayed info is available then it's hydration causing the delay
SharpieMasterOP
also aditional information: I am using t3 stack + app router
all I want is for it to not cache when leaving the page, such that every time the component is loaded it completley resets it as if i would have refreshed the page
its just the hydration
Giant panda
what i see from the video is it retains the prev value until it fetches the new one from the api , is that the bug ?
SharpieMasterOP
i wouldnt call it a bug, but just a problem
Giant panda
i mean ya the issue you are facing
SharpieMasterOP
yea
getMine: protectedProcedure.query(async ({ ctx }) => {
const recipes = await ctx.db.recipe.findMany({
where: {
userId: ctx.session.user.id,
},
orderBy: {
openedAt: "desc",
},
});
return recipes;
}),
update: protectedProcedure
.input(
z.object({
recipeId: z.string(),
title: z.string(),
description: z.string(),
}),
)
.mutation(async ({ ctx, input }) => {
const recipe = await ctx.db.recipe.update({
where: {
id: input.recipeId,
},
data: {
title: input.title,
description: input.description,
},
});
return recipe;
}),Giant panda
useEffect(() => {
setTitle(recipe?.title ?? "");
setDescription(recipe?.description ?? "");
}, [recipe]);SharpieMasterOP
?
Giant panda
wait
SharpieMasterOP
thats just because initially recipe is null, before it gets fetched
but when I visit the page its not null it has its previous value
Giant panda
ya , so you need it null basically if you come back to this page from update recipe right ?
SharpieMasterOP
?
yes i need it to be null when I re visit it
or at least updated
because trpc caches it somewhere
but i dont know where
or how to change said cahce
cache
Giant panda
one weird hack might be to use <a> tag to the prev page
SharpieMasterOP
yea ik...
but that reloads the whole page
and the nav bar
Giant panda
ya
SharpieMasterOP
which is terrible ux
Giant panda
another hack i can think of is that you can check if you visit from your save recipe page , and if yes then show empty state until new data is fetched , but again this is a hack and i don't know where the actual problem is and how to solve it
SharpieMasterOP
yea but the compnent will still act as if it has fetched the data already
I need someone that knows trpc ðŸ˜
Giant panda
i honestly think it's not trpc caching issue but more of a DOM caching issue , coz then trpc would have never given you new value , but i might be totally wrong , other people can help you
SharpieMasterOP
it could be
SharpieMasterOP
SharpieMasterOP
Ill make a re-post
SharpieMasterOP
what happens now?
SharpieMasterOP
@risky what do you suggest I do now