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?