Letting built-in Plasmic data integration be pre-fetched using Next.js SSR (codegen approach)

Developer Support
1

What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets, and reproduction steps)

We are building a Nextjs app using Plasmic and the codegen approach.

The following code is my pages/reviews.tsx file, which represents the Reviews page in my Plasmic editor:

// This is a skeleton starter React page generated by Plasmic.
// This file is owned by you, feel free to edit as you see fit.
import * as React from "react";
import { PageParamsProvider as PageParamsProvider__ } from "@plasmicapp/react-web/lib/host";
import GlobalContextsProvider from "../components/plasmic/archer_trade_log_mvp/PlasmicGlobalContextsProvider";

import { PlasmicReviews } from "../components/plasmic/archer_trade_log_mvp/PlasmicReviews";
import { useRouter } from "next/router";

function Reviews() {
  // Use PlasmicReviews to render this component as it was
  // designed in Plasmic, by activating the appropriate variants,
  // attaching the appropriate event handlers, etc.  You
  // can also install whatever React hooks you need here to manage state or
  // fetch data.
  //
  // Props you can pass into PlasmicReviews are:
  // 1. Variants you want to activate,
  // 2. Contents for slots you want to fill,
  // 3. Overrides for any named node in the component to attach behavior and data,
  // 4. Props to set on the root node.
  //
  // By default, PlasmicReviews is wrapped by your project's global
  // variant context providers. These wrappers may be moved to
  // Next.js Custom App component
  // (https://nextjs.org/docs/advanced-features/custom-app).
  return (
    <GlobalContextsProvider>
      <PageParamsProvider
        route={useRouter()?.pathname}
        params={useRouter()?.query}
        query={useRouter()?.query}
      >
        <PlasmicReviews />
      </PageParamsProvider>
    </GlobalContextsProvider>
  );
}

export default Reviews;

Our question

I want to add code that makes sure that any built-in Plasmic data integrations used on this page (or any of its child components) are pre-fetched using SSR.

How is this typically done, when using the codegen approach?
Is there a concrete code example?

We have read and processed the entire Plasmic documentation multiple times and explored multiple AI engines to generate example code, but did not find a concrete way yet to achieve this, for the codegen approach at least.

Thanks in advance!

Other than that, we absolutely love what you guys are doing! Plasmic has quickly become a solid part of in-house way of working of building custom applications/solutions for our customers.

Kind regards,
Stijn De Vos

1 Like
2

Hi @stijn_de-vos ,

Thanks for providing the details. The data is prefetched by default. To access the value in the codegen mode, please visit the following docs for more details

An example code snippet is provided below:

import { extractPlasmicQueryData } from '@plasmicapp/react-web/lib/prepass';
import { PlasmicQueryDataProvider } from '@plasmicapp/react-web/lib/query';

// Pre-fetching
export function getStaticProps() {
  const queryCache = await extractPlasmicQueryData(<PlasmicHome />);
  return {
    props: { queryCache }
  };
}

// Rendering page
export function HomePage({ queryCache }) {
  return (
    <PlasmicQueryDataProvider prefetchedCache={queryCache}>
      <PlasmicHome />
    </PlasmicQueryDataProvider>
  );
}
1 Like
3

Hi @muhammad_asim ,

Thanks a lot for your answer!

I just realized that on most of the pages, the data fetches are user specific, so it might not make sense to use SSG for them.

However, I do have a follow-up question in the same area:

Our main goal is to make sure that when a user clicks a button that navigates to another page, that this page shows immediately and then the necessary data is fetched.

At the moment we see the following behavior:

  • You click on a button on the current page to go to the next page
  • The URL in the browser search bar changes immediately
  • But the next page is only shown a second later, showing then our usual loading boundary for the data query that is getting revalidated

Our goal:
When you click a button that navigates to the next page, the next page is shown immediately. And it does not matter that the page data queries to fetch any user data to fill in a table for example is still being executed, we have loading boundaries for that.

Question:
Could this be achieved by using SSG (getStaticProps) to fetch the Plasmic page’s HTML content, without the query data then?

If yes, I suppose there is another Plasmic method to do that, compared to extractPlasmicQueryData which is specifically used for Plasmic data queries?

So that we can pass on “prefetchedData” instead of “prefetchedCache”?

If yes, do you have a concrete code example for this, by any chance?

Thanks in advance,
Kind regards,

Stijn De Vos