> ## Documentation Index
> Fetch the complete documentation index at: https://makeswift-docs-branch.mintlify.site/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

The following examples expect that you have a Makeswift client instance already configured and exported from `"@/makeswift/client.ts"`. If you don't, see the [client](/developer/reference/client/constructor) reference.

### Basic usage

```tsx theme={null}
import { getSiteVersion } from "@makeswift/runtime/next/server";
import { Makeswift } from "@makeswift/runtime/next";
import { ReactRuntime } from "@makeswift/runtime/react";

export const runtime = new ReactRuntime();

export const client = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY, {
  runtime,
});

const productDetailSnapshot = await client.getComponentSnapshot(
  `my-product-details`,
  {
    siteVersion: getSiteVersion(),
  }
);
```

### Localization

```tsx theme={null}
import { getSiteVersion } from "@makeswift/runtime/next/server";
import { Makeswift } from "@makeswift/runtime/next";
import { ReactRuntime } from "@makeswift/runtime/react";

export const runtime = new ReactRuntime();

export const client = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY, {
  runtime,
});

const locale = "en-US";
const snapshot = await client.getComponentSnapshot(id, {
  siteVersion: getSiteVersion(),
  locale,
});
```

## Changelog

| Version                                                                                          | Changes                                  |
| ------------------------------------------------------------------------------------------------ | ---------------------------------------- |
| [`v0.23.0`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.23.0) | `getComponentSnapshot` method introduced |