For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Sign in
DocsAPI ReferenceChangelog
DocsAPI ReferenceChangelog
  • Get started
    • Quickstart
    • Concepts
  • Guides
    • Environments
  • Reference
        • Constructor
        • getPages
        • getPageSnapshot
        • getComponentSnapshot
        • getSiteVersion
      • Makeswift API Handler
    • Product docs
    • Blog
    • Support
Sign in
LogoLogo
On this page
  • Arguments
  • Return type
  • Examples
  • Basic usage
  • Localization
  • Changelog
Reference@makeswift/runtimeClient

getComponentSnapshot

Was this page helpful?
Previous

getPageSnapshot

Next

getSiteVersion

Built with

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.

Untitled
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

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