Next js content not being updated on page visit

Unanswered

SharpieMaster posted this in #help-forum

2023-10-01T05:18:56.000Z

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

2023-10-01T05:19:00.000Z

Giant panda

2023-10-01T05:22:05.000Z

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

2023-10-01T05:22:45.000Z

do you need any specific files?

like the components?

Giant panda

2023-10-01T05:23:33.000Z

the 2 is the delay you are talking about right ?

SharpieMasterOP

2023-10-01T05:23:38.000Z

the 2

the Change

and the Change again but on the edit-recipe page

Giant panda

2023-10-01T05:24:18.000Z

okay so both must be using state

and would be client component , right ?

SharpieMasterOP

2023-10-01T05:24:35.000Z

"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

2023-10-01T05:26:08.000Z

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

2023-10-01T05:26:44.000Z

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

2023-10-01T05:30:19.000Z

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

2023-10-01T05:30:35.000Z

i wouldnt call it a bug, but just a problem

Giant panda

2023-10-01T05:30:48.000Z

i mean ya the issue you are facing

SharpieMasterOP

2023-10-01T05:30:52.000Z

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

2023-10-01T05:32:07.000Z

    useEffect(() => {
        setTitle(recipe?.title ?? "");
        setDescription(recipe?.description ?? "");
    }, [recipe]);

SharpieMasterOP

2023-10-01T05:32:24.000Z

Giant panda

2023-10-01T05:32:38.000Z

wait

SharpieMasterOP

2023-10-01T05:32:39.000Z

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

2023-10-01T05:34:17.000Z

ya , so you need it null basically if you come back to this page from update recipe right ?

SharpieMasterOP

2023-10-01T05:34:33.000Z

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

2023-10-01T05:36:43.000Z

one weird hack might be to use <a> tag to the prev page

SharpieMasterOP

2023-10-01T05:36:54.000Z

yea ik...

but that reloads the whole page

and the nav bar

Giant panda

2023-10-01T05:37:04.000Z

SharpieMasterOP

2023-10-01T05:37:10.000Z

which is terrible ux

Giant panda

2023-10-01T05:47:13.000Z

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

2023-10-01T05:52:33.000Z

yea but the compnent will still act as if it has fetched the data already

I need someone that knows trpc ðŸ˜

Giant panda

2023-10-01T05:57:57.000Z

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

2023-10-01T05:58:10.000Z

it could be