Loading times on dynamic CMS-based pages. How do I fix this?

Developer Support
1

Hi all,

I’m using GraphQL (Caisy) as a CMS for a client site.

Website is a mess right now so ignore that, but click between these products:

https://1-hire-website-oongdbd1l-drawbridgelabs.vercel.app/services/all

There’s no “loading” pop up as I see on the dev server. On Vercel, what actually happens is there’s a several second wait before anything happens. Then it loads into a fully loaded page with no loading popup.

I’m happy to do whatever as long as its best practice - what should I be doing for instant page loads? I tried the following to test out staticpaths on two of my pages, but I’m a bit clueless here:

export const getStaticPaths: GetStaticPaths = async () => {
  const pages = await PLASMIC.fetchPages();

  // Manually adding paths for testing
  const manualPaths = [
    { params: { catchall: ['services', 'fencing', 'heras-fencing'] } },
    { params: { catchall: ['services', 'generators', '10kva-generator'] } },
    // Add more paths as needed
  ];

  return {
    paths: [
      ...pages.map((page) => ({
        params: { catchall: page.path.substring(1).split('/') }
      })),
      ...manualPaths,
    ],
    fallback: 'blocking'
  };
};

What ALSO seems weird is on the dynamic pages, clicking off the page (like clicking the logo to return to the homepage which is static) takes a few seconds too.

How do I debug best?

2

image
image

It seems much of this is waiting for server response. Any ideas?

3

Hi @tom_prest-drawbridge , the issue is that the data is not being fetched and pre-rendered on the server. You can verify by disabling JS and seeing nothing ever loads. It’s being requested on the browser which kills perf.

If you use the quickstart code here, it should be doing proper pre-loading of the data - are you already using this code?

4

Hey @yang.

Thanks for the reply as always.

Ok - so this isn’t intentional? That’s a good start at least.

This project was created via plasmic studio, pushed to GitHub and I work on my local repo, so it was created entirely in plasmic as per the guide.

What can I look into to work out why this isn’t working as expected? Happy to share a project link or a link to my repo etc

5

Yes can you please share your Plasmic project URL?

6

Sure thing @yang.

Does this work or do you need a different URL?

https://studio.plasmic.app/projects/vNPK12bNdeKVkTRg7i686D

One thing to note is that my CMS integration may not be perfect right now but that’s not even the cause of the prolem as moving between static pages also has this loading time issue.

EDIT: Double checked that preview was set to false on build and that’s correct, so that’s one potential cause ruled out.

const isDevelopment = process.env.NODE_ENV === 'development';
console.log("Plasmic preview mode:", isDevelopment);

export const PLASMIC = initPlasmicLoader({
  projects: [
    {
      id: process.env.NEXT_PUBLIC_PLASMIC_ID!,
      token: process.env.NEXT_PUBLIC_PLASMIC_TOKEN!,
    },
  ],
 

  // By default Plasmic will use the last published version of your project.
  // For development, you can set preview to true, which will use the unpublished
  // project, allowing you to see your designs without publishing.  Please
  // only use this for development, as this is significantly slower.
   preview: isDevelopment,
});

Also disabled the above and just put “false” for testing purposes and still have the same issue:

image

7

image
image898×220 19.5 KB

Is this relevant also?

8

Can confirm we can repro the issue. We’ll dig into it, thanks for reporting!

9

Very interesting! Glad to hear it’s something that’s identifiable.

Is it too soon to ask how long it might take to resolve? It’s okay as long as I can communicate that to the people I’m working with.

I can’t go live with this client’s website as the loading times are too significant an issue :grimacing:

10

@yang is it best/appropriate for me to render these pages statically on build like so? The data may change from time to time but will be mostly static.

image
image863×642 11 KB

11

@yang I can’t launch my site for this client. Do you have any ETA on a fix so I can at least communicate that to them?

12

Apologies for the delayed response. The issue should already be fixed. If you update your plasmic npm libraries to the latest versions, then the loading should work out of the box again. Can you confirm this with your repo?

13

Hi @yang

Ran npm update, published on plasmic studio and rebuilt on vercel and problem persists.

Please explore some of these pages - “Waiting for server response” for several seconds on pages.

https://www.1hire.co.uk/services

14

Hmm, I am currently getting a 404 from that URL…

15

Apologies, try the root

16

I’m seeing that the GraphQL data is inlined into the initial page HTML.

This is the only section of the page where I could find a GraphQL fetch, and it’s there even if you try loading the page with JS disabled.

image
image1839×1527 510 KB

Let me know if there’s something else here.

17

Hi @yang ,

I didn’t get round to replying to this sooner. Ignore the section on the homepage - go to any of the services pages and you’ll see there’s often a several second delay before anything happens.

18

Please let me know if this helps, I am able to get it pre-rendering fine on a brand new nextjs app, so I think it may be due to the quickstart catch-all used for these pages…

19

Hi @yang

Thanks for the detailed vid!

Unfortunately I’ve cloned the project, hosted on Plasmic hosting and same issue. You’ve mentioned pre-rendering is working fine on your version, but as far as I can tell there was still the same problem of a massive delay in waiting for the page to load.

I’ve just tested this on a fresh clone on plasmic hosting and there’s 3-5 seconds of waiting for response before the page does anything. This is obviously really, really bad UX I’m just trying to identify what the source of this delay is?

image
image774×482 39.6 KB

20

@yang and the community; solved the issue.

Even with static pages, I was facing a long server response and couldn’t work it out.

Turns out my static pages were fine, it was the method I was navigating to them with. I was using onClick, which naturally had to retrieve the slug from the APIs before navigating.

Since converting all my buttons to components, all is well.