Rest API behaviour

david_haddad · February 6, 2023, 6:09pm

I was surprised to see that the published page containing a rest api component was calling the api endpoint in the production website. My understanding was that with static site generation, that data is prefetched and pre-rendered server side with end users only seeing / instant static pages. This has page load speed and security considerations. For example. any keys in the API request will be visible to any user.

What can we do to have plasmic only pre-render static pages (like webflow does)?

yang · February 7, 2023, 12:46am

Hi David, pre-fetching should work. Some things to check from your end:

Do you have all the prefetching code as specified in the quickstart? (To extract Plasmic queries in your getStaticProps)
If you try a brand new create-plasmic-app, Next, and include in your Plasmic project, do you still see the issue? I would debug the differences vs. your environment from there.
Do you potentially have a variant (such as a screen variant) overriding some prop passed into the fetcher component?
Do you have any code in your own codebase that could be somehow causing a re-render with different props?

david_haddad · February 7, 2023, 9:36am

Hi Yang, I followed the steps on this page earlier in the project creation. Please note, this project is only pushing code out without any incoming code and consists of a couple of rest api component and nothing else (so quite simple). And the pages are being created with a vercel push. Is that maybe a vercel option that needs to be setup? There are no variants changing the behaviour of the rest api component. Also as mentioned before no extra code in the codebase.

Also, just checked again, and as for the rest api component other than setting the request type and params and lots of styling options I’m unable to see any further customisation settings to pre-fetch or not.

yang · February 13, 2023, 8:53pm

No, that is not a Vercel operation. You should be able to confirm with a fresh create-plasmic-app or deploying your page to Plasmic hosting (which is just using our standard Next.js quickstart and running on Vercel).

Would you mind running through the above checklist and let me know what you find? Even if there was an issue with the Plasmic platform that we can help with, we would need your help to better understand where it’s coming from.

yang · February 13, 2023, 8:54pm

Took a quick look at your project and live page - the REST fetcher is calling xano, but I do not see any client-side requests to xano happening… Can you confirm?

yang · February 13, 2023, 9:04pm

Note that if your question is only about the key visibility, and there are indeed no client-side fetches happening for this data source, then a couple options:

Have your data provider issue a key that has read-only permissions to the needed data (simplest)
Put your key in an env var (.env) and provide it via a Plasmic DataProvider context, so you can feed it into your REST API fetcher:

export const MyAuthProvider = ({children}: {children?: ReactNode}) =>
  <DataProvider name="myKey" data={ process.env.MY_KEY }>{children}</DataProvider>;

// wrap your plasmic-host page and any PlasmicRootProviders with
<MyAuthProvider>...</MyAuthProvider>

david_haddad · February 13, 2023, 9:45pm

Hey Yang.

This is going over my head and I’m a developer. Please keep in mind that’s don’t use react or next and the whole point of using plasmic is so that I don’t have to deal with these technologies as most of my development time is spent on flutter and our mobile apps as well as designing our db and api’s.

Is the rest fetcher only supposed to work in the designer and when the page are ore-generated? Or is it also supposed to also run on the published website?
What do you mean by client requests here? You mean the published webpage? I’ve seen xano API calls in the chrome network tab being sent out from the webpge.

What ok ecoexfing to see is no external requests beyond the page loaded and any Js or css given that it’s a astatic site.

Please let me know if there’s something wrong with my assumptions or expectations.

david_haddad · February 13, 2023, 9:48pm

Also another indicator that xano is being called from.the hosted webpage is that we have a rate limit on the end API and that seems to be hit when many pages are refreshed since I’m seeing a couldn’t load data placeholder message in the child node element. Again that’s not from the designer but from the published vercel published page.

yang · February 14, 2023, 2:43am

Hi David - will try to provide some explanation:

When you deploy a Next.js page (independent of Plasmic), you can configure whether it is a static pre-generated page (getStaticProps) or a server-rendered-per-request page (getServerSideProps) or something in between (getStaticProps with a revalidate timeout, which is the default shown in the Next.js quickstart. In the Plasmic Studio editor, by contrast, it is going to fetch each and every time you render that page.
I’m looking at your published Vercel page, but I can’t see xano requests made from the browser…