Skip to main content

​
Arguments

  1. ​
    id
    string
    required
    The id of the component.
  2. ​
    options
    object
    required
    Options for site version and locale.

​
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

VersionChanges
v0.23.0getComponentSnapshot method introduced