Next.js Discord

Discord Forum

Does Next.js optimizes subsequent client-side navigations differently from the first one?

Unanswered
Ovenbird posted this in #help-forum
Open in Discord
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, <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?

0 Replies