Next.js Discord

Discord Forum

value changes even when on static build

Answered
NuclearMonkey posted this in #help-forum
Open in Discord
Avatar
i don't understand why the static page changes the value when I click the home
Answered by Alfonsus Ardani
they have 2 value
View full answer

102 Replies

Avatar
Image
Image
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?
Avatar
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
Avatar
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
Avatar
No like when you run npm run build
Avatar
Image
Avatar
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
Avatar
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 693
Avatar
And if you refresh the page?
Avatar
it goes back to 657
can I screen share to you?
like in DMs, if its okay with you
Avatar
One sec, lemme get home and I can check it out
Avatar
@NuclearMonkey
is this the expected behaviour?
Avatar
yes
it should be static right
Avatar
are you sure you are on production?
Avatar
yeah
Avatar
tell me the commands you ran
Avatar
npm run build and npm run start
do you see anything in your implementation different from this?
Avatar
no
its basically the same
Avatar
thats unusual, screenshare
dm me and i can join
Avatar
@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
Avatar
they have 2 value
Answer
Avatar
one is the cache of the whole page (.html)
one is the cache of the prefetched link (rsc)
i know its weird
Avatar
wouldnt it be same though?
Avatar
as you can tell the time only differs by a bit
Image
the content is the same its just that they rendered twice
because of partial rendering
Avatar
wait ppr?
Avatar
no
i dont think so
Avatar
its still in canary right
Avatar
see what kind of payload is returned when prefetching / (home) from /about
like i said, ive experienced this issue from a while back
Avatar
hm
wait one sec
Avatar
is it pure html or RSC
Avatar
rsc
,{"children":245}]
Avatar
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
Avatar
hmm, looks liek it wasnt mentioned in the docs
Avatar
But theyre all generated at the same time at build
Its very technical
Avatar
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
Avatar
All the prefetches of static routes are also generated at build after the full route are generated

So after '/', generates / from /about, etc.

I assume they only generate twice per static route
Avatar
so when I clicked the root link it sends the rsc
so it changes
Avatar
It receives rsc so it changed
Avatar
because the random number is dynamic
Avatar
no its static
it just gets 2 static values
one from the pregenerated html
Avatar
no i mean the random number generator
Avatar
one from the static rsc
its still static, as per nextjs it gets cached
Avatar
it generates 2 different number, the different for static html and diffrent for the RSC
is what im saying
Avatar
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
Avatar
yeah that was also the theory i mentioned to you earlier
what alfonsus said
thanks for the help
its all making sense now
Avatar
np, mark alfon's stuff as the soln
Avatar
@Alfonsus Ardani
Avatar
This post is done, continue in discussion lols
Avatar
kk
Avatar
@Alfonsus Ardani is there a way to make to make the html and rsc the same?
Avatar
try using cache() or unstable_cache()