> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# getComponentSnapshot

> An instance method of the Makeswift [client](/developer/docs/reference/client/constructor) that fetches a snapshot of a Makeswift component by its `id`. This snapshot is only intended to be rendered by [`<MakeswiftComponent>`](/developer/docs/reference/components/makeswift-component) and [`<Slot>`](/developer/docs/reference/components/slot).

An instance method of the Makeswift [client](/developer/docs/reference/client/constructor) that fetches a snapshot of a Makeswift component by its `id`. This snapshot is only intended to be rendered by [`<MakeswiftComponent>`](/developer/docs/reference/components/makeswift-component) and [`<Slot>`](/developer/docs/reference/components/slot).

## Arguments

**`id`** `string` — required

The id of the component.

---

**`options`** `object` — required

Options for site version and locale.

#### properties

**`siteVersion`** `SiteVersion` — required

For **App Router**, this is the return value from calling
[getSiteVersion](/developer/docs/reference/functions/get-site-version). For **Pages
Router**, this is the return value from
[Makeswift.getSiteVersion](/developer/docs/reference/client/get-site-version).

---

**`locale`** `string`

A valid locale string.

---

**`allowLocaleFallback`** `boolean`

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>`](/developer/docs/reference/components/makeswift-component) and [`<Slot>`](/developer/docs/reference/components/slot).

---

## Examples

### Basic usage

The following example shows how to fetch a page-specific component snapshot and render it using the [`<Slot>`](/developer/docs/reference/components/slot) component within a page.

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

```tsx 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`**

```tsx 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`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.23.0) | `getComponentSnapshot` method introduced |