Delay in accessing static pages, which opens in new tab faster

Help
1

Hi, I have a recurring issue with pages taking longer time to render. On my console, it shows the page has compiled but would not open until later.

While waiting for the page to render, if I open the same page in a new tab, it opens but takes longer time.
It’s unusual, as sometimes a mere static page would take longer time to render than a page needing fetched data. This also happens, trying to search, or just going from dashboard page to home page.

Please how do I fix this. What could be responsible?
My current nextjs version is 14.1.0, and next-auth: ^5.0.0-beta.15.

2

Hi, and welcome @okiemutegold!

The slow rendering issues you’re experiencing, even with static pages, could be due to several factors in Next.js 14.1.0. The inconsistency between pages suggests it might be related to how your application is handling server-side rendering (SSR) and hydration.

Some ideas to address this:

  • Make sure you’re using the app directory for improved performance
  • Check for unnecessary data fetching in your layout files that might delay rendering
  • Review your use of NextAuth to optimize session handling, as authentication checks can introduce overhead.
  • For debugging, add performance markers using the Next.js User Timing API to identify slow-loading components or data fetches.
  • If the issue persists, consider using the React Profiler to measure rendering performance of different parts of your app.
  • For more advanced diagnostics, explore Next.js debugging techniques.

Let us know how you get on!

3

Hi @pawlean,
Thank you for the links, I have checked before, but will again with these.

For the points:

  • I’m using app directory
  • I’m not performing data fetch in any of my layout file
  • I fetch data in page, but the page still delays (I doubt server action is responsible, please any thought?)
  • I’m using suspense where needed
  • Static pages like /privacy should load on the fly (you mentioned several factors, can you please elaborate?)
  • checking a session before redirecting user or continuing on route should not cause this lag in layout or other components (any thoughts?)

Thanks

4

Hello @pawlean, It was an issue with cookie bot script and facebook script I used in my layout.tsx.

Do you know how best this can be done and not have it interfere with page navigations / routing.
I’m already using Script tag in the head

cookie:

     <Script
          id="Cookiebot"
          src="..."
          data-cbid="..."
          data-blockingmode="auto"
          type="text/javascript"
          strategy="lazyOnload"
          async
     />

fb:

      <Script
          id="fb-pixel"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              ...
            `
          }}
      />

      <noscript>
          <img
            height="1"
            width="1"
            style={{ display: "none" }}
            src={`https://www.facebook.com/tr?id=${process.env.FB_ID}&ev=PageView&noscript=1`}
            alt=""
          />
      </noscript>

Thanks again!

1 Like