Hi – I set up a CMS for the first time for our blog and am seeing significant loading time for CMS elements (author name, date of publish, etc.). You can see here: https://www.rampedcareers.com/blog/how-to-find-a-job. The rest of the page is loading quickly, so not sure if there is an issue with how the CMS elements are being retrieved?
There are two sets of loads happening, once at page load, and once at many seconds in
Each load takes 70-150ms
If you publish this to (say) a brand new Next.js codebase with create-plasmic-app , do you see the same behavior?
Yeah, I guess we’re wondering why there are multiple loads? Is it not possible to have these pages statically generated?
It should be statically generated by default, i.e. you should see 0 loads (instead of the 4 shown)
Is there an additional package we need to install for the Cms ? I haven’t added anything plasmic related to our next app in a while (before adding the Cms today)
There shouldn’t be
The extractPlasmicQueryData call from the quickstart should be doing the prepass for fetching data, but even if you get static data fetching, there is some sort of state change / re-rendering happening that is causing a new fetch that the initial static build didn’t see before
Maybe one of our code components is triggering that
Looks like the URL params being queried are different each time:
<https://studio.plasmic.app/api/v1/cms/databases/ipwsJnkUAfE7EEBWYbNZ5Q/tables/blogPosts/query?q=%7B%22where%22%3A%7B%22blogTitle%22%3A%22How+to+find+a+job+in+2022%22%7D%2C%22limit%22%3A0%2C%22order%22%3A%5B%7B%22field%22%3A%22blogTitle%22%2C%22dir%22%3A%22asc%22%7D%5D%7D&draft=0&locale=undefined>
<https://studio.plasmic.app/api/v1/cms/databases/ipwsJnkUAfE7EEBWYbNZ5Q/tables/blogPosts/query?q=%7B%22where%22%3A%7B%22blogTitle%22%3A%22How+to+find+a+job+in+2022%22%7D%2C%22limit%22%3A0%2C%22order%22%3A%5B%7B%22dir%22%3A%22asc%22%7D%5D%7D&draft=0&locale=undefined>
<ttps://studio.plasmic.app/api/v1/cms/databases/ipwsJnkUAfE7EEBWYbNZ5Q/tables/blogPosts/query?q=%7B%22where%22%3A%7B%22blogTitle%22%3A%22How+to+find+a+job+in+2022%22%7D%2C%22limit%22%3A0%2C%22order%22%3A%5B%7B%22dir%22%3A%22asc%22%7D%5D%7D&draft=0&locale=undefined>
<https://studio.plasmic.app/api/v1/cms/databases/ipwsJnkUAfE7EEBWYbNZ5Q/tables/blogPosts/query?q=%7B%22limit%22%3A0%2C%22order%22%3A%5B%7B%22dir%22%3A%22asc%22%7D%5D%7D&draft=0&locale=undefined>
Yeah, we have a component that resets query parameters for attribution, that may be the trigger for the subsequent calls with different parameters
I’ll try removing that component and see if it fixes it
hm, removing the component didn’t fix it unfortunately
Based on what you shared, I think I see why - our […catchall].js doesn’t call extractPlasmicQuery:
Does that mean multiple queries are still happening and something else is triggering them?
What do you see when you turn into a brand new repo with creates-plasmic-app?
import * as React from 'react';
import { PlasmicComponent, ComponentRenderData, PlasmicRootProvider } from '@plasmicapp/loader-nextjs';
import { GetStaticPaths, GetStaticProps } from 'next';
import Error from 'next/error';
import { PLASMIC } from '../plasmic-init';
/**
* Use fetchPages() to fetch list of pages that have been created in Plasmic
*/
export async function getStaticPaths(context) {
const pages = await PLASMIC.fetchPages();
return {
paths: pages.map((page) => ({
params: { catchall: page.path.substring(1).split('/') }
})),
fallback: 'blocking',
};
};
/**
* For each page, pre-fetch the data we need to render it
*/
export async function getStaticProps(context) {
const { catchall } = context.params ?? {};
// Convert the catchall param into a path string
const plasmicPath =
typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? `/${catchall.join('/')}` : '/';
const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
if (plasmicData) {
// This is a path that Plasmic knows about; pass the data
// in as props
return {
props: { plasmicData },
// Using incremental static regeneration, will re-generate this page
// after 300s
revalidate: 300
};
} else {
// This is some non-Plasmic catch-all page
return {
props: {}
};
}
};
/**
* Actually render the page!
*/
export default function CatchallPage( { plasmicData }) {
// console.log(props)/
// const { plasmicData } = props;
console.log(plasmicData)
if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
return <Error statusCode={404} />;
}
const pageMeta = plasmicData.entryCompMetas[0];
return (
// Pass in the data fetched in getStaticProps as prefetchedData
<PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
{
// plasmicData.entryCompMetas[0].name contains the name
// of the component you fetched.
}
<PlasmicComponent component={pageMeta.name} />
</PlasmicRootProvider>
);
}
What do you see when you turn into a brand new repo with creates-plasmic-app?
How do I do that? need to download the cli and link it to our project?