Next.js Discord

2024-03-30T15:41:41.000Z

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

2024-03-30T15:41:56.000Z

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?

2024-03-30T15:54:16.000Z

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

2024-03-30T16:01:03.000Z

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

2024-03-30T16:01:30.000Z

No like when you run npm run build

2024-03-30T16:02:19.000Z

2024-03-30T16:03:57.000Z

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

2024-03-30T16:06:19.000Z

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

2024-03-30T16:06:40.000Z

And if you refresh the page?

2024-03-30T16:06:54.000Z

it goes back to 657

can I screen share to you?

like in DMs, if its okay with you

2024-03-30T16:07:40.000Z

One sec, lemme get home and I can check it out

https://ccfsss-4000.csb.app/

2024-03-30T16:20:07.000Z

@NuclearMonkey

is this the expected behaviour?

2024-03-30T16:20:30.000Z

yes

it should be static right

2024-03-30T16:20:53.000Z

are you sure you are on production?

2024-03-30T16:20:57.000Z

yeah

2024-03-30T16:21:02.000Z

tell me the commands you ran

2024-03-30T16:21:10.000Z

npm run build and npm run start

hmm, https://codesandbox.io/p/devbox/eloquent-hooks-ccfsss

2024-03-30T16:21:27.000Z

do you see anything in your implementation different from this?

2024-03-30T16:22:43.000Z

its basically the same

2024-03-30T16:23:06.000Z

thats unusual, screenshare

dm me and i can join

https://codesandbox.io/p/devbox/eloquent-hooks-ccfsss

2024-03-30T16:42:15.000Z

@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

2024-03-30T16:45:57.000Z

they have 2 value

Answer

2024-03-30T16:46:05.000Z

one is the cache of the whole page (.html)

one is the cache of the prefetched link (rsc)

i know its weird

2024-03-30T16:47:03.000Z

wouldnt it be same though?

2024-03-30T16:47:18.000Z

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

2024-03-30T16:47:42.000Z

wait ppr?

2024-03-30T16:47:44.000Z

i dont think so

2024-03-30T16:47:55.000Z

its still in canary right

2024-03-30T16:48:09.000Z

see what kind of payload is returned when prefetching / (home) from /about

like i said, ive experienced this issue from a while back

2024-03-30T16:49:11.000Z

wait one sec

2024-03-30T16:50:42.000Z

is it pure html or RSC

2024-03-30T16:50:58.000Z

rsc

,{"children":245}]

2024-03-30T16:51:31.000Z

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

2024-03-30T16:52:11.000Z

hmm, looks liek it wasnt mentioned in the docs

2024-03-30T16:52:13.000Z

But theyre all generated at the same time at build

Its very technical

2024-03-30T16:53:02.000Z

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

2024-03-30T16:53:39.000Z

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

2024-03-30T16:53:51.000Z

so when I clicked the root link it sends the rsc

so it changes

2024-03-30T16:54:02.000Z

It receives rsc so it changed

2024-03-30T16:54:04.000Z

because the random number is dynamic