@plasmicapp/nextjs-app-router

This package provides helpers for doing extractPlasmicQueryData() with Next.js App Router.

We normally use react-ssr-prepass to fake-render a React tree to gather data requirements. We can't do so in RSC mode, because all the client components are imported as placeholders, so we cannot fake-render them.

The idea here is to use the dev server's SSR instead! At SSR time (instead of RSC time), we do have access to imported client components. So... we could do pre-rendering there, gather the data needs, and respond with them. At RSC time, we hit the SSR endpoint, and parse out the data needs.

So...

1. Update app/[[...catchall]]/page.tsx to conditionally wrap the page contents inside to extract the query data. It would look something like:

``
import { ExtractPlasmicQueryData } from "@plasmicapp/nextjs-app-router";
import { fetchExtractedQueryData } from "@plasmicapp/nextjs-app-router/react-server";

// Use revalidate if you want incremental static regeneration
export const revalidate = 60;

export default async function PlasmicLoaderPage({
params,
searchParams,
}: {
params?: { catchall: string[] | undefined };
searchParams?: Record;
}) {
const pathname = "/" + (params?.catchall ? params.catchall.join("/") : "");
const prefetchedData = await fetchPlasmicComponentData(
params?.catchall
);
if (!prefetchedData || prefetchedData.entryCompMetas.length === 0) {
notFound();
}

const pageMeta = prefetchedData.entryCompMetas[0];

return withExtractPlasmicQueryData(
prefetchedData={prefetchedData}
pageRoute={pageMeta.path}
pageParams={pageMeta.params}
pageQuery={searchParams}
>

,
{
pathname,
searchParams,
}
);
}

async function fetchPlasmicComponentData(catchall: string[] | undefined) {
const plasmicPath = "/" + (catchall ? catchall.join("/") : "");
return PLASMIC.maybeFetchComponentData(plasmicPath);;
}

/**
* Helper function to extract Plasmic data.
*
* Given the element and current pathname + search
* params, returns:
* - The extracted query data, if plasmicSsr search param is set
* - A copy of the root provider element with the extracted query data, otherwise
*/
async function withExtractPlasmicQueryData(
plasmicRootProvider: React.ReactElement,
{
pathname,
searchParams,
}: {
pathname: string;
searchParams: Record | undefined;
}
) {
const isPlasmicSsr =
!!searchParams?.["plasmicSsr"] && searchParams?.["plasmicSsr"] !== "false";

// If plasmicSsr search param is set, just wrap the root provider inside
//
if (isPlasmicSsr) {
return (
{plasmicRootProvider}
);
}

// Otherwise, fetch the same endpoint, but setting plasmicSsr to extract the
// query data.
const prepassHost =
process.env.PLASMIC_PREPASS_HOST ??
(process.env.VERCEL_URL && https://${process.env.VERCEL_URL}) ??
http://localhost:${process.env.PORT ?? 3000};

// Build a copy of the search params
const newSearchParams = new URLSearchParams(
Object.entries(searchParams ?? {}).flatMap(([key, values]) =>
Array.isArray(values) ? values.map((v) => [key, v]) : [[key, values]]
)
);

// Set plasmicSsr search param to indicate you are using this endpoint
// to extract query data.
newSearchParams.set("plasmicSsr", "true");

if (process.env.VERCEL_AUTOMATION_BYPASS_SECRET) {
// If protection bypass is enabled, use it to ensure fetching from
// the SSR endpoint will not return the authentication page HTML
newSearchParams.set(
"x-vercel-protection-bypass",
process.env.VERCEL_AUTOMATION_BYPASS_SECRET
);
}

// Fetch the data from the endpoint using the new search params
const prefetchedQueryData = await fetchExtractedQueryData(
${prepassHost}${pathname}?${newSearchParams.toString()}
);

// Provide the query data to
return React.cloneElement(plasmicRootProvider, {
prefetchedQueryData,
});
}
`

is a new client component from this package, which basically performs extractPlasmicQueryData() on its children, and then renders a