value changes even when on static build
Answered
NuclearMonkey posted this in #help-forum
NuclearMonkeyOP
i don't understand why the static page changes the value when I click the home
102 Replies
NuclearMonkeyOP
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?
Arinji
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
NuclearMonkeyOP
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
Arinji
No like when you run npm run build
NuclearMonkeyOP
Arinji
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
NuclearMonkeyOP
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 693Arinji
And if you refresh the page?
NuclearMonkeyOP
it goes back to 657
can I screen share to you?
like in DMs, if its okay with you
Arinji
One sec, lemme get home and I can check it out
NuclearMonkeyOP
yes
it should be static right
Arinji
are you sure you are on production?
NuclearMonkeyOP
yeah
Arinji
tell me the commands you ran
NuclearMonkeyOP
npm run build and npm run start
do you see anything in your implementation different from this?
NuclearMonkeyOP
no
its basically the same
Arinji
thats unusual, screenshare
dm me and i can join
Arinji
@Alfonsus Ardani 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
Alfonsus Ardani
they have 2 value
Answer
Alfonsus Ardani
one is the cache of the whole page (.html)
one is the cache of the prefetched link (rsc)
i know its weird
Arinji
wouldnt it be same though?
Alfonsus Ardani
as you can tell the time only differs by a bit
the content is the same its just that they rendered twice
because of partial rendering
Arinji
wait ppr?
Alfonsus Ardani
no
i dont think so
Arinji
its still in canary right
Alfonsus Ardani
see what kind of payload is returned when prefetching
/ (home) from /aboutlike i said, ive experienced this issue from a while back
Arinji
hm
wait one sec
Alfonsus Ardani
is it pure html or RSC
Arinji
rsc
,{"children":245}]
Alfonsus Ardani
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
Arinji
hmm, looks liek it wasnt mentioned in the docs
Alfonsus Ardani
But theyre all generated at the same time at build
Its very technical
NuclearMonkeyOP
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
Alfonsus Ardani
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
NuclearMonkeyOP
so when I clicked the root link it sends the rsc
so it changes
Alfonsus Ardani
It receives rsc so it changed
NuclearMonkeyOP
because the random number is dynamic
Arinji
no its static
it just gets 2 static values
one from the pregenerated html
NuclearMonkeyOP
no i mean the random number generator
Arinji
one from the static rsc
its still static, as per nextjs it gets cached
NuclearMonkeyOP
it generates 2 different number, the different for static html and diffrent for the RSC
is what im saying
Arinji
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
NuclearMonkeyOP
yeah that was also the theory i mentioned to you earlier
what alfonsus said
thanks for the help
its all making sense now
Arinji
np, mark alfon's stuff as the soln
Arinji
@Alfonsus Ardani
Alfonsus Ardani
This post is done, continue in discussion lols
Arinji
kk
NuclearMonkeyOP
@Alfonsus Ardani is there a way to make to make the html and rsc the same?
Alfonsus Ardani
try using cache() or unstable_cache()