Next.js Discord

Discord Forum

Next js content not being updated on page visit

Unanswered
SharpieMaster posted this in #help-forum
Open in Discord
Avatar
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

Avatar
SharpieMasterOP
Image
Avatar
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
Avatar
SharpieMasterOP
do you need any specific files?
like the components?
Avatar
Giant panda
the 2 is the delay you are talking about right ?
Avatar
SharpieMasterOP
the 2
the Change
and the Change again but on the edit-recipe page
Avatar
Giant panda
okay so both must be using state
and would be client component , right ?
Avatar
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
Image
This is the edit recipe form
Avatar
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
Avatar
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
Avatar
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 ?
Avatar
SharpieMasterOP
i wouldnt call it a bug, but just a problem
Avatar
Giant panda
i mean ya the issue you are facing
Avatar
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;
        }),
Avatar
Giant panda
    useEffect(() => {
        setTitle(recipe?.title ?? "");
        setDescription(recipe?.description ?? "");
    }, [recipe]);
Avatar
SharpieMasterOP
?
Avatar
Giant panda
wait
Avatar
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
Avatar
Giant panda
ya , so you need it null basically if you come back to this page from update recipe right ?
Avatar
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
Avatar
Giant panda
one weird hack might be to use <a> tag to the prev page
Avatar
SharpieMasterOP
yea ik...
but that reloads the whole page
Avatar
Giant panda
ya
Avatar
SharpieMasterOP
and the nav bar
which is terrible ux
Avatar
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
Avatar
SharpieMasterOP
yea but the compnent will still act as if it has fetched the data already
I need someone that knows trpc 😭
Avatar
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
Avatar
SharpieMasterOP
it could be
Avatar
Risky did start the fire 🙃
Avatar
SharpieMasterOP
Image
Avatar
SharpieMasterOP
Ill make a re-post
Avatar
SharpieMasterOP
what happens now?
Avatar
SharpieMasterOP
@Risky did start the fire 🙃 what do you suggest I do now