getComponentSnapshot

An instance method of the Makeswift client that fetches a snapshot of a Makeswift component by its id. This snapshot is only intended to be rendered by <MakeswiftComponent> and <Slot>.

Arguments

1. id · string · required

   The id of the component.

2. options · object · required

   Options for site version and locale.

   Show child attributes

   siteVersion · SiteVersion · required

   For App Router, this is the return value from calling getSiteVersion. For Pages Router, this is the return value from Makeswift.getSiteVersion.

   locale · string

   A valid locale string.

   allowLocaleFallback · boolean · default: true

   Controls whether a request for a localized component should fallback to the default locale if the requested locale is not available.

Return type

snapshot · Promise<MakeswiftComponentSnapshot | null>

An opaque MakeswiftComponentSnapshot object that is only intended to be rendered by <MakeswiftComponent> and <Slot>.

Examples

Basic usage

The following example shows how to fetch a page-specific component snapshot and render it using the <Slot> component within a page.

src/app/products/[slug]/page.tsx

import { getSiteVersion } from "@makeswift/runtime/next/server";
import { Slot } from "@makeswift/runtime/next";

import { client } from "@/makeswift/client";

type Props = {
  params: Promise<{ slug: string }>;
};

export default async function ProductPage({ params }: Props) {
  const { slug } = await params;

  const snapshot = await client.getComponentSnapshot(
    `product-details-${slug}`,
    {
      siteVersion: getSiteVersion(),
    }
  );

  return (
    <main>
      <h1>Product: {slug}</h1>
      <Slot snapshot={snapshot} label={`Product details for ${slug}`} />
    </main>
  );
}

Localization

The following example uses the locale param to fetch a localized snapshot of a page-specific component.

src/app/[locale]/products/[slug]/page.tsx

import { getSiteVersion } from "@makeswift/runtime/next/server";
import { Slot } from "@makeswift/runtime/next";

import { client } from "@/makeswift/client";

type Props = {
  params: Promise<{ locale: string; slug: string }>;
};

export default async function ProductPage({ params }: Props) {
  const { locale, slug } = await params;

  const snapshot = await client.getComponentSnapshot(
    `product-details-${slug}`,
    {
      siteVersion: getSiteVersion(),
      locale,
    }
  );

  return (
    <main>
      <h1>Product: {slug}</h1>
      <Slot snapshot={snapshot} label={`Product details for ${slug}`} />
    </main>
  );
}

Changelog

Version	Changes
v0.23.0	getComponentSnapshot method introduced