Does Next.js optimizes subsequent client-side navigations differently from the first one?
Unanswered
Ovenbird posted this in #help-forum
OvenbirdOP
Hello people,
I am bulding up a app with React 19 and Next 15.
I am running up a preloader animation that runs only in home page and once.
In layout.tsx I import a component,
As you can see
I thought that by importing
If I run the app with a cleaned cache I get the preloading animation in home page, then I navigate to a another page,
If I restart the dev server without the cache cleaning,
Here the questions: Does Next.js optimizes subsequent navigations differently from the first one?
I am bulding up a app with React 19 and Next 15.
I am running up a preloader animation that runs only in home page and once.
In layout.tsx I import a component,
<PrealoderWrapper />. It is just a wrapper that gather translations server-side and then import the <Prealoder />component, a client component that runs the animation. I manage the animation with useAnimate (motion/react) and useEffect.const [hasPreloaderRun, setPreloaderHasRun] = useAtom(preloaderHasRunAtom);
const [scope, animate] = useAnimate();
useEffect(() => {
console.log("useEffect running, hasPreloaderRun:", hasPreloaderRun);
if (hasPreloaderRun) {
return;
}
console.log('I run!');
const animateSequence = async () => {
if (!scope.current) {
return;
};
await animate(
'p',
{
opacity: [0, 1, 0],
},
{
duration: 0.4,
times: [0, 0.4, 0.8],
delay: stagger(0.2, { startDelay: 2.5, from: 0 }),
}
);
setPreloaderHasRun(true);
};
animateSequence();
}, [animate, hasPreloaderRun, scope, setPreloaderHasRun]);As you can see
preloaderHasRunAtom is defined with Jotai.I thought that by importing
<PreloaderWrapper /> into layout.tsx it was persistent (no re-mounting) and that I therefore needed neither to use Jotai (a persistent state) nor to put the if initial condition in the useEffect.If I run the app with a cleaned cache I get the preloading animation in home page, then I navigate to a another page,
useEffect from <Prealoder /> runs, it prints the value at false and then return because of if without run the animation. If I navigate to a second page, the useEffect does not runs.If I restart the dev server without the cache cleaning,
useEffect does not runs also on the first navigation.Here the questions: Does Next.js optimizes subsequent navigations differently from the first one?