Reference@makeswift/runtimeClient

getPageSnapshot

An instance method of the Makeswift client that fetches a snapshot of a Makeswift page at a given path. This snapshot is only intended to be rendered by the <Page> component.

Arguments

pathname
stringRequired

The path of the page.

options
objectRequired

Options for site version and locale.

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 (ex. "en-US").

allowLocaleFallback
booleanDefaults to

Controls whether a request for a localized page should fallback to the default locale if the requested locale is not available.

Return type

Something went wrong!

Examples

Basic usage

The following example sets up a catch all route where page snapshots are fetched from Makeswift and rendered using the <Page> component.

src/pages/[[...path]].tsx
1import {
2  GetStaticPathsResult,
3  GetStaticPropsContext,
4  GetStaticPropsResult,
5} from "next";
6
7import {
8  Page as MakeswiftPage,
9  PageProps as MakeswiftPageProps,
10  Makeswift,
11  type SiteVersion
12} from "@makeswift/runtime/next";
13
14import { client } from "../../../../../makeswift/client";
15import "../../../../../makeswift/components";
16
17type ParsedUrlQuery = { path?: string[] };
18
19export async function getStaticPaths(): Promise<
20  GetStaticPathsResult<ParsedUrlQuery>
21> {
22  const pages = await client.getPages().toArray();
23
24  return {
25    paths: pages.map((page) => ({
26      params: {
27        path: page.path.split("/").filter((segment) => segment !== ""),
28      },
29    })),
30    fallback: "blocking",
31  };
32}
33
34export type PageProps = MakeswiftPageProps & {
35  siteVersion: SiteVersion | null;
36};
37
38export async function getStaticProps({
39  params,
40  previewData,
41}: GetStaticPropsContext<ParsedUrlQuery>): Promise<
42  GetStaticPropsResult<PageProps>
43> {
44  const path = "/" + (params?.path ?? []).join("/");
45  const siteVersion = Makeswift.getSiteVersion(previewData);
46  const snapshot = await client.getPageSnapshot(path, {
47    siteVersion,
48  });
49
50  if (snapshot == null) return { notFound: true };
51
52  return {
53    props: {
54      snapshot,
55      siteVersion,
56    },
57  };
58}
59
60export default function Page({ snapshot }: MakeswiftPageProps) {
61  return <MakeswiftPage snapshot={snapshot} />;
62}

Localization

The following example uses the locale param in getStaticProps to fetch a localized snapshot of a page.

src/pages/[[...path]].tsx
1import {
2  GetStaticPathsResult,
3  GetStaticPropsContext,
4  GetStaticPropsResult,
5} from "next";
6
7import {
8  Page as MakeswiftPage,
9  PageProps as MakeswiftPageProps,
10  Makeswift,
11  type SiteVersion
12} from "@makeswift/runtime/next";
13
14import { client } from "../../../../../makeswift/client";
15import "../../../../../makeswift/components";
16
17type ParsedUrlQuery = { path?: string[] };
18
19export async function getStaticPaths(): Promise<
20  GetStaticPathsResult<ParsedUrlQuery>
21> {
22  const pages = await client.getPages().toArray();
23
24  return {
25    paths: pages.map((page) => ({
26      params: {
27        path: page.path.split("/").filter((segment) => segment !== ""),
28      },
29    })),
30    fallback: "blocking",
31  };
32}
33
34export type PageProps = MakeswiftPageProps & {
35  siteVersion: SiteVersion | null;
36  locale: string | undefined;
37};
38
39export async function getStaticProps({
40  params,
41  previewData,
42  locale,
43}: GetStaticPropsContext<ParsedUrlQuery>): Promise<
44  GetStaticPropsResult<PageProps>
45> {
46  const path = "/" + (params?.path ?? []).join("/");
47  const siteVersion = Makeswift.getSiteVersion(previewData);
48  const snapshot = await client.getPageSnapshot(path, {
49    siteVersion,
50    locale,
51  });
52
53  if (snapshot == null) return { notFound: true };
54
55  return {
56    props: {
57      snapshot,
58      siteVersion,
59      locale,
60    },
61  };
62}
63
64export default function Page({ snapshot }: MakeswiftPageProps) {
65  return <MakeswiftPage snapshot={snapshot} />;
66}

Changelog

VersionChanges
v0.24.0Adds allowLocaleFallback option
v0.11.0Adds locale option
v0.2.0getPageSnapshot method introduced