First call to getServerSideProps is slow

[joaquimds]

Hi all,

I was just hoping to check if things are working normally or if I've done something wrong. It seems like the first call to getServerSideProps takes around 2 seconds when running Next in production mode.

I have two pages, Home and Test, and a <Link> from Home to Test.

Test contains the following code:

import Link from 'next/link'

const Test = () => (
  <>
    <div className="header">
      <h1>Test</h1>
      <Link href="/">
        <a>Home</a>
      </Link>
    </div>
  </>
)

export const getServerSideProps = async ({ req, res }) => {
  return { props: {} }
}

export default Test

Why might getServerSideProps take so long to run first time?

Furthermore - the Test page loads almost immediately the second time I navigate to it, so I'm wondering if there's some way to warm whatever cache is providing the speedup?

[samuelcelko]

I'm experiencing the same issue. In dev, the first route change takes a while and every subsequent one (even when the server fetched data is different!) is almost instant.

In prod, every route change to a component with getServerSideProps takes the same amount - around 2-3 seconds, even when the data fetched is quite small.

Any ideas on what might be causing this?

[EnvestorsTeam]

Also having the same thing, getServerSideProps, seems to just take such a long time?

[joaquimds]

I have no fix but I added a loading indicator for UX...

  _app.js
  -------
  import NProgress from 'nprogress'
  import 'nprogress/nprogress.css'
  import Router from 'next/router'

  const MyApp = () => {
    useEffect(() => {
      Router.events.on('routeChangeStart', NProgress.start)
      Router.events.on('routeChangeComplete', NProgress.done)
      Router.events.on('routeChangeError', NProgress.done)
      return () => {
        Router.events.off('routeChangeStart', NProgress.start)
        Router.events.off('routeChangeComplete', NProgress.done)
        Router.events.off('routeChangeError', NProgress.done)
      }
    }, [])
  }

[talbertherndon]

To add to this, just install this package: https://www.npmjs.com/package/nprogress

Then add the code above to you _app.js file, it should work pretty well as an indicator.

[samuelcelko]

Same here, I've added an NProgress indicator which makes it a little more obvious that something is being loaded. However, the (bug?) still persist and I'm wondering whether anyone has experienced the same thing and found a solution.

[simonuvarov]

Are you using prod in a serverless mode? If so, then it takes some time to warm up a serverless function (nextjs handler).

[aminick]

Same problem, looking for some 'best practices' on this topic

[tomiiide]

any fix to this yet?

[woodybury]

bump. Sometimes takes > 7 seconds in production even if getServerSideProps doesn't even make an api call!

[montanaflynn]

I've noticed this as well

[sptclr]

any update for this problems? i have same issue..

[nastaransamui]

I have same problem on this with cookies check and Vercel show "504: GATEWAY_TIMEOUT"

[2stash]

Anyone update to latest next.js package? Worked for discussion below.

#34540

[nastaransamui]

update to "next": "12.1.0" solved my problem.

[jeffminsungkim]

It didn't work for me. I'm using v12.3.1 atm.

[Morbe17]

Still experiencing this. Could be beacasue the amount of imports?

[nastaransamui]

The last part that help me to improve this and not get any error on Vercel was move my dbConnection from getServerSideProps to each API files.

[jodik]

Added my other 2 main pages here: https://screenbud.com/s/RVoMPSVDhrc initial loadup time went down from 10-20secs to ~0

[jodik]

Maybe that's not even necessary with following next.config.js:

   modularizeImports: {
      '@mui/icons-material': {
        transform: '@mui/icons-material/{{member}}',
      },
    },

[mshahzaib101]

got this solution while searching for this bug

const isServerReq = req => !req.url.startsWith('/_next');

function Post({ post }) {
  // Render post...
}

export async function getServerSideProps({ req }) {
  const initData = isServerReq(req) ? await fetch(...) : null;

  return {
    props: {
      initData,
    },
  }
}

issue: #13910

[AHTHneeuhl]

Is this working?

[mahmir217]

not working :(

[terryli0095]

Even if getServerSideProps is just an empty function, this problem persists. The 5+ seconds seem to suggest that it has to be a server warmup issue. Perhaps a cron job that pings the vercel server?

[smakosh]

Or switch the runtime to experimental edge

[timfuhrmann]

In a lot of cases, this is most likely due to serverless function cold starts and the Node.js runtime booting. It depends on various factors, such as the dependencies inside your function. By switching to egde runtime you can improve the performance to near-zero cold starts.

This article describes the issue for projects hosted on Vercel.

[Untel]

I don't think it's about cold start.
It was my first doubt, so i deployed in a dedicated server, and it was even slower

[mareksuscak]

We're currently experiencing this outside of Vercel, in standalone mode where Next is deployed in a Docker container running on Cloud Run (in CPU always allocated configuration with minimum number of instances set to 1 so cold starts should be minimal). There's got to be something else that's causing this - either the number of dependencies or getInitialProps in the custom Document? Could that be the culprit. We are pulling some data but navigating between pages takes 2-4s when clicking a Next Link whereas reloading the page takes a lot less (~1s). We tried the latest Canary release (13.4.20) to no avail. We use Pages Router, not the App Router.

[mareksuscak]

As a quick follow up for anyone who stumbled upon this comment, we managed to resolve this issue and it was a 3rd party library (mobx-react):
#53624 (comment)

[denvudd]

For those who are still suffering from this issue, I want to share my experience. My cold start time was about 7 seconds on a new project.

Now I can say that:

• Using App Router in another project, I don't have this issue in DEV mode or production.
• Using experimental-edge in Pages Router helped reduce the cold start time from 7 seconds to 0.2 seconds (approximately, results may vary).

In any case, when researching this issue, I found many similar issues that are still unresolved, and I couldn't find any comments from Vercel. I hope you all will find the solution to this problem. Good luck!

Relative:
My Project's Issue
Slow initial page load with getServerSideProps
Super slow page load times in development environment

By the way, for some reason, I can't find the relevant documentation for the experimental-edge feature in Next.js. Here's a mention of it in the blog: https://nextjs.org/blog/next-12-2#edge-api-routes-experimental

[Jairwin-L]

But most people here are probably looking for solutions under page router, right? Not app router.

my scene is mainly for seo

[Jairwin-L]

This is the scenario where I use getServerSideProps. Let’s see if anyone has a solution.

export async function getServerSideProps(props: any) {
  const seoItem = await axios(`/xxx/xxx/seo`);
  return { props: seoItem };
}

[Jairwin-L]

@timneutkens @sokra This post is currently being discussed by many people. Can you help me figure out how to deal with it?

[nicholasoxford]

Im having issues with "next": "13.5.6",

What version of node is everyone use? Were using Apollo query so not sure experimental-edge is any switch for us

[marharyta]

Same here. "next": "13.4.19",

[doorman02]

any updates on this? Vercel is a great service but for those not able to use Edge for the time being I wonder what options we have here. Since this only happens the first time, it must be a cold start issue right? Question is if its related to loading nodejs or just the app. For subscribing Vercel users it would be nice to get some feedback on what is really causing the delay even if it will not be fixed. Could this be solved with a different hosting plan? Is there an easy way, maybe a built in feature to keep the app warm? Thanks in advance for any feedback.

[TomasSestak]

pls any solution? this is unusable

[patched-admin]

We are facing this issue too. Looking at using the edge runtime but that would require us to rearchitect our app a bit. Hope a fix is prioritized.

[fgrs]

my solution was to leave vercel and move to amplify, no issues since.

…

On Sat, 20 Jan 2024 at 13:14, patched-admin ***@***.***> wrote: We are facing this issue too. Looking at using the edge runtime but that would require us to rearchitect our app a bit. Hope a fix is prioritized. — Reply to this email directly, view it on GitHub <#12447 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6B5XOUADOVSA7GP7HT7NLYPOYKPAVCNFSM4MYG7AXKU5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TQMJYHE4DMOA> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[morgansson]

In my case, it was making my /blog page very slow, as I'm getting posts from an API, and I wanted to use serverSideProps for SEO, but when people already navigated the main page, or any other page, I get the posts using useEffect instead, and it was still taking ages to load.

I did a little, and bizarre hack to prevent this (which doesn't totally fix it, but it makes it unnoticeable).

/pages/blog/preload.js

export default function Preload(){
  return null;
}
export const getServerSideProps = () => {
  return {
    props: {
      empty: true
    },
  };
};

and then anywhere in your layout:

  useEffect(() => {
    fetch("/blog/preload");
  }, []);

[Matergi]

any solution? 😡

[malimccalla]

This is still the solve for me

#12447 (comment)

it uses the old API but solves the issue. Hoping this gets addressed

[liho00]

using next js 14+ same issues... planning to switch to remix js... 😭

[censuradho]

I had to migrate my project to the app folder, this only solved my problem 🤡