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

1. pathname · string · required

   The path of the page.

2. options · object · required

   Options for site version and locale.

   Show child attributes

   siteVersion · SiteVersion · required

   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 · boolean · default: true

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

Return type

snapshot · Promise<MakeswiftPageSnapshot | null>

An opaque Snapshot object that is only intended to be rendered by the <Page> component.

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

import {
  GetStaticPathsResult,
  GetStaticPropsContext,
  GetStaticPropsResult,
} from "next";

import {
  Page as MakeswiftPage,
  PageProps as MakeswiftPageProps,
  Makeswift,
} from "@makeswift/runtime/next";

import { client } from "@/makeswift/client";
import "@/makeswift/components";

type ParsedUrlQuery = { path?: string[] };

export async function getStaticPaths(): Promise<
  GetStaticPathsResult<ParsedUrlQuery>
> {
  const pages = await client.getPages().toArray();

  return {
    paths: pages.map((page) => ({
      params: {
        path: page.path.split("/").filter((segment) => segment !== ""),
      },
    })),
    fallback: "blocking",
  };
}

export type PageProps = MakeswiftPageProps & {
  previewMode: boolean;
  locale: string | undefined;
};

export async function getStaticProps({
  params,
  previewData,
  locale,
}: GetStaticPropsContext<ParsedUrlQuery>): Promise<
  GetStaticPropsResult<PageProps>
> {
  const path = "/" + (params?.path ?? []).join("/");
  const snapshot = await client.getPageSnapshot(path, {
    siteVersion: Makeswift.getSiteVersion(previewData),
    locale,
  });

  if (snapshot == null) return { notFound: true };

  return {
    props: {
      snapshot,
      previewMode: Makeswift.getPreviewMode(previewData),
      locale,
    },
  };
}

export default function Page({ snapshot }: MakeswiftPageProps) {
  return <MakeswiftPage snapshot={snapshot} />;
}

Localization

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

pages/[[...path]].tsx

import { Makeswift, Page as MakeswiftPage } from "@makeswift/runtime/next"

import { client } from "@/makeswift/client"

export async function getStaticPaths() {
  const pages = await client.getPages()

  return {
    paths: pages.map((page) => ({
      params: {
        path: page.path.split("/").filter((segment) => segment !== ""),
      },
    })),
    fallback: "blocking",
  }
}

export async function getStaticProps({ params, previewData, locale }) {
  if (params == null) return { notFound: true }

  const path = "/" + (params.path ?? []).join("/")
  const snapshot = await client.getPageSnapshot(path, {
    siteVersion: Makeswift.getSiteVersion(previewData),
    locale,
  })

  if (snapshot == null) return { notFound: true }

  return { props: { snapshot } }
}

export default function Page({ snapshot }) {
  return <MakeswiftPage snapshot={snapshot} />
}

Changelog

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