I am experiencing some pretty bad performance, specifically when navigating to a page for the first time. I want to know how exactly I can remedy this issue. I have some theories as to why this is happening, but ultimately I am unsure.
Just to note, this page load speed when navigating between pages does not occur in the editor, only after deployment. I am making another assumption in that the studio editor has some pre loading capabilities and caching that is giving me a false sense of page load speed during testing.
Each page has a query to contentful, that retrieves ID’s for each section of that page.
Those ID’s are fed into a component called pageZoneRenderer
Which is a section that contains a large amount of conditional guard components, that only render if the current zone that was passed to the pageZoneRenderer matches a content type. (Through another API call)
I think this passing of ID’s from an API call to make another API call is what is slowing down page transitions. But I’m not sure if it is actually the case. If you head to my deployment here: https://main.d37n9r9upm0xy7.amplifyapp.com
And try to navigate to the arcade page, it takes nearly 3 seconds to load, and there is nothing happening on the screen to even indicate that a page navigation is occurring, so it’s very jarring for users to use, as they’re unsure if what they clicked or tapped is even doing anything.
I understand if architecturally, this is not optimal, but how else can I achieve a dynamic page layout? Is there someway to deploy with an SSG like Gatsby to pre-fetch all this information during build time and make it a static site?
Any help would be appreciated
Hey @anthony_schanen.
Testing your project in Plasmic Hosting (https://bab.plasmic.run/) it seems to be running with a good speed.
I believe there is some misconfiguration with the cache here for getStaticProps. From what I’ve seen it seems to always be missing the next/cloudfront cache.
Hey, @icaro_guerra thanks for that insight. I too noticed that bab.plasmic.run was much faster, but could not pinpoint why.
If there is some misconfiguration, where exactly would I configure the caching so there isn’t a cache miss going on consistently?
Could it be from my deployment method? When deploying to Amplify, I first had plasmic push to github, and had amplify pick up the repository from there.
I’m new to CI/CD pipelines. Im sure there are some specifics I bulldozed over in not using the “webhook” option to go to Amplify directly.
Please correct me if I am wrong.
I would also just like to learn more about how deployments work with plasmic in general. I’ve read the docs but I am missing context because I don’t have any background knowledge in how Next handles this stuff. Do you mind pointing me in the right direction if I have to consult their docs? And if this is going to involve setting up a repository locally or if this configuration can happen without having to leave the studio editor.
You can either change in you catchall page in the repo for a bigger revalidate time (our default one is 60 secs) or you can change your cloudfront cache in Amplify (not sure how to do this one tho, never used it).
Thanks for that! I’l attempt both and see what happens. If you don’t mind, how did you come to this conclusion? What did you do to “see” the cache issue? That way I have a method of looking at an objective measure other than seeing if the pages load faster.
You can check what request is taking long on the Network tab of your console and see the cache response headers like the image:
This is the request NextJS sends to get the page props (that are cached from getStaticProps).
1 Like
Thanks! @icaro_guerra you’ve been very helpful
I may be wrong but is your navigation is performed via an interaction/onClick? I’ve found much better performance when using link components in Plasmic studio. I had similar issues and resolved that way in the past.
@icaro_guerra suggestion was correct. I decided to change Cloudfronts cache within Amplify and that did the trick once the pages were cached. Tested with multiple devices too. Everything is nice and zippy again!
These were the relevant docs
They are implemented with interactions yeah. Haven’t tried swapping everything for link components but I think I will do that anyway and take your suggestion. Seems better “semantically” at least within the editor. Thanks for that tip
Yep I think interactions seem to perform fine but whenever the links require data fetching they result in several seconds of nothing.
