value changes even when on static build
Answered
NuclearMonkey posted this in #help-forum
i don't understand why the static page changes the value when I click the home
102 Replies
value changes when I click on the home link
export default function PostsPage() {
function randomThreeDigitNumber() {
return Math.floor(Math.random() * (1000 - 100) + 100);
}
return (
<div>
PostsPage
<p>{randomThreeDigitNumber()}</p>
<p>{new Date().toISOString()}</p>
</div>
);
}export default function Home() {
function randomThreeDigitNumber() {
return Math.floor(Math.random() * (1000 - 100) + 100);
}
return (
<div>
Home
<p>{randomThreeDigitNumber()}</p>
<p>{new Date().toISOString()}</p>
</div>
);
}this build is on prod
@Arinji have you encountered this?
@NuclearMonkey <@890486507872342027> have you encountered this?
Dev mode dosent have agressive cache remember
It tries to give u updates values
Oh wait you on prod
One sec lemme give it a look
Looks to be a react thing, not a nextjs thing
React rerender the component remember, hence the numbers update
That's what changes the numbers
@NuclearMonkey can you show me what next build shows
i forgot to give the layout code
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import Link from 'next/link';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<nav className="">[navbar]</nav>
<ul>
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/posts">About</Link>
</li>
</ul>
{children}
</body>
</html>
);
}this only happens when you navigate via links
not via the URL bar
No like when you run npm run build
So when you go to /posts from / via the link you see the dates update right?
And if you refresh the page the date remains the same, then if you go back to / and then go to /posts from there the value changes
when I first go to the
/ route route it gives 657 then when I pressed the navigation link that has an href of / it then changes the 657 to 693And if you refresh the page?
One sec, lemme get home and I can check it out
yes
it should be static right
@NuclearMonkey yes
are you sure you are on production?
yeah
tell me the commands you ran
npm run build and npm run start
do you see anything in your implementation different from this?
no
its basically the same
thats unusual, screenshare
dm me and i can join
@alfonsus another cache issue
when you are on / and you click on the home link.. the values update
is this a hydration thing? the / page gives 2 values
985 and 245, 245 seems to be the correct value since navigating from / to posts, then back to / gives 245
985 and 245, 245 seems to be the correct value since navigating from / to posts, then back to / gives 245
Answer
one is the cache of the whole page (.html)
one is the cache of the prefetched link (rsc)
i know its weird
wouldnt it be same though?
the content is the same its just that they rendered twice
because of partial rendering
wait ppr?
no
i dont think so
its still in canary right
see what kind of payload is returned when prefetching
/ (home) from /about@Arinji its still in canary right
like i said, ive experienced this issue from a while back
hm
wait one sec
is it pure html or RSC
rsc
,{"children":245}]
Yeah, they need to generate 2 version
One is the .html of the whole page, and the other is just the partial rendering, the soft navigation
Atleast thats how I understand it
CMIIW
hmm, looks liek it wasnt mentioned in the docs
But theyre all generated at the same time at build
Its very technical
does this happen because, next js generate an html file and a RSC file?
when next build right, it generates and html and rsc which look is json like
All the prefetches of static routes are also generated at build after the full route are generated
So after '/', generates
I assume they only generate twice per static route
So after '/', generates
/ from /about, etc.I assume they only generate twice per static route
so when I clicked the root link it sends the rsc
so it changes
It receives rsc so it changed
because the random number is dynamic
it just gets 2 static values
one from the pregenerated html
no i mean the random number generator
one from the static rsc
@NuclearMonkey no i mean the random number generator
its still static, as per nextjs it gets cached
it generates 2 different number, the different for static html and diffrent for the RSC
is what im saying
yup, 2 different static numbers, thats the main difference
its static cause they wont change, but yes different in terms of each other
Im probs gonna look into this a bit more, but alfon should have solved your query
yeah that was also the theory i mentioned to you earlier
what alfonsus said
thanks for the help
its all making sense now
np, mark alfon's stuff as the soln
@alfonsus
This post is done, continue in discussion lols
kk
@alfonsus is there a way to make to make the html and rsc the same?
@NuclearMonkey <@194128415954173952> is there a way to make to make the html and rsc the same?
try using cache() or unstable_cache()