> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# getComponentSnapshot

> An instance method of the Makeswift [client](/developer/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/reference/components/makeswift-component) and [`<Slot>`](/developer/reference/components/slot).

## Arguments

1. <ParamField query="id" type="string" required>
     The id of the component.
   </ParamField>
2. <ParamField query="options" type="object" required>
     Options for site version and locale.

     <Expandable>
       <ParamField query="siteVersion" type="SiteVersion" required>
         For **App Router**, this is the return value from calling
         [getSiteVersion](/developer/reference/get-site-version). For **Pages
         Router**, this is the return value from
         [Makeswift.getSiteVersion](/developer/reference/client/get-site-version).
       </ParamField>

       <ParamField query="locale" type="string">
         A valid locale string.
       </ParamField>

       <ParamField query="allowLocaleFallback" type="boolean" default={true}>
         Controls whether a request for a localized component should fallback to
         the default locale if the requested locale is not available.
       </ParamField>
     </Expandable>
   </ParamField>

## Return type

<ResponseField name="snapshot" type="Promise<MakeswiftComponentSnapshot | null>">
  An opaque `MakeswiftComponentSnapshot` object that is only intended to be rendered by
  [`<MakeswiftComponent>`](/developer/reference/components/makeswift-component) and [`<Slot>`](/developer/reference/components/slot).
</ResponseField>

## Examples

### Basic usage

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

```tsx src/app/products/[slug]/page.tsx theme={null}
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.

```tsx src/app/[locale]/products/[slug]/page.tsx theme={null}
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 |