getServerSideProps is slow and pre-fetch only contains params and not payload.

Question

I am using NextJS currently using version 13.4.5.

The application is hosted via Docker and is hosted on a k8s cluster along with its external APIs. We are doing this using the next.config.js standalone configuration as documented in the docker setup guide.

Upon initial page load it seems all the routes for all the pages that are linked to on the page are being "pre-fetched" and taking upwards of 11 seconds for a petty slow feeling initial load. That would be okay if when pressing to navigate to details page if it was fast but that is also upwards of 8 seconds. It seems "pre-fetch" has query param but no payload attached.

When clicked to navigate a almost identical request is sent but there is data attached to it and also takes 8 seconds.

The only slow request in the app come from "/_next/data/.../..." route on the baseUrl. The other cleint side request are under 3 seconds. Why are these server side request so escrishiatingly slow?

Pretty close to removing all gSSP calls and doing everything client side which kinda makes me feel like why am I using NextJS in the first place...

Would love to find a solution and will MARK SOLVED when a resolution is found ðŸ¤—

Spotted Owl · Answer

gSSP codeexport const getServerSideProps: GetServerSideProps = async (context) => {
  const channelId = context.query.channel;
  const client = await getGraphQLClient(context);

if (!channelId) {
    return {
      notFound: true,
    };
  }

const initialNetwork = await client.request(GET_CHANNEL_DETAILS_BY_ID, { id: `${channelId}` });

return {
    props: { initialNetwork, channelId },
  };
};

getServerSideProps is slow and pre-fetch only contains params and not payload.

2 Replies