Dynamic data-driven pages with code components

Let’s say that you already have data-fetching code components, either created by yourself, or from the Plasmic component store (such as components that show CMS or commerce data).

You know that you can create (static) pages that include this data. But you can also create dynamic pages/routes.

Examples include:

  • A blog with one page per post.
  • A storefront with one page per product.

(If you are looking to pass dynamic data into simple static Plasmic designs that don’t use code components, see how to pass overrides to the component API.)

The approach is to take a single page designed in Plasmic, and communicate to it the URL parameters. This essentially uses that page as a template.

Example: statically generated /products/[slug] pages in Next.js or Gatsby

Here’s an example showing how to display a product at /products/[slug], using Next.js or Gatsby dynamic routes.

We’ll assume we’re fetching data using the data-fetching components in the Plasmic CMS.

Let’s say our page includes a Plasmic CMS data-fetching component instance. These components take “Filter field” and “Filter value” props that allow you to fetch specific elements from the CMS. This is specific to the Plasmic CMS data-fetching component—other data-fetching components will have different props.

In Plasmic studio, you can set “Filter field” to “slug” and bind “Filter value” to a dynamic value coming from the URL. To do so, first set the page path to “/products/[slug]” and set “slug” preview parameter to a product slug that exists in your model:

Then, set “Filter field” to “slug”, right click “Filter value” in CMS Data Loader props and hit “Use dynamic value”. You should see “Page route params”, which will let you pick the “slug” param that you added to the page path.

Code integration

In general, you will need to ensure the data from your framework’s router is passed into PlasmicRootProvider (if using Headless API) or PageParamsProvider (if using codegen).

You can find a complete example project at https://studio.plasmic.app/projects/bY35SmJJgVeJtcuAReMtgz.

Adding SEO page metadata

To add dynamic SEO metadata—such as a page title and description that vary based on the fetched data—you can’t rely on the page metadata for the time being.

Instead, insert a Head component. This has various props that you can configure from the right sidebar to set the page title and other SEO/page metadata.

This is an invisible component, and must be selected from the outline list. Be sure to insert this somewhere in the outline under whatever data fetching component you’re using—that way, you can set the page title, etc. to a dynamic value that will be able to access the fetched data.

See the opening video for an example of this.

Was this page helpful?

Give feedback on this page