Reference@makeswift/runtimeClient

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

id
stringRequired

The id of the component.

options
objectRequired

Options for site version and locale.

siteVersion
SiteVersionRequired

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
booleanDefaults to

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

Return type

Something went wrong!

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
1import { getSiteVersion } from "@makeswift/runtime/next/server";
2import { Slot } from "@makeswift/runtime/next";
3
4import { client } from "../../../../../makeswift/client";
5
6type Props = {
7  params: Promise<{ slug: string }>;
8};
9
10export default async function ProductPage({ params }: Props) {
11  const { slug } = await params;
12
13  const snapshot = await client.getComponentSnapshot(
14    `product-details-${slug}`,
15    {
16      siteVersion: getSiteVersion(),
17    }
18  );
19
20  return (
21    <main>
22      <h1>Product: {slug}</h1>
23      <Slot snapshot={snapshot} label={`Product details for ${slug}`} />
24    </main>
25  );
26}

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
1import { getSiteVersion } from "@makeswift/runtime/next/server";
2import { Slot } from "@makeswift/runtime/next";
3
4import { client } from "../../../../../makeswift/client";
5
6type Props = {
7  params: Promise<{ locale: string; slug: string }>;
8};
9
10export default async function ProductPage({ params }: Props) {
11  const { locale, slug } = await params;
12
13  const snapshot = await client.getComponentSnapshot(
14    `product-details-${slug}`,
15    {
16      siteVersion: getSiteVersion(),
17      locale,
18    }
19  );
20
21  return (
22    <main>
23      <h1>Product: {slug}</h1>
24      <Slot snapshot={snapshot} label={`Product details for ${slug}`} />
25    </main>
26  );
27}

Changelog

VersionChanges
v0.23.0getComponentSnapshot method introduced