next-sanity
Version:
Sanity.io toolkit for Next.js
35 lines (34 loc) • 1.6 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import dynamic from "next/dynamic";
import { startTransition, useEffect, useState } from "react";
const SanityLiveClientComponent = dynamic(() => import("../../SanityLive.js"), { ssr: false });
/**
* Renders `<SanityLive>` in the browser only, after hydration. `next/dynamic` with
* `ssr: false` keeps `@sanity/client` and the live event machinery in a separate chunk
* that's only downloaded if the component actually renders
* (https://github.com/sanity-io/next-sanity/issues/3306), and gives the Next.js bundler
* better optimization opportunities than `React.lazy`.
*
* The mount gate exists because `next/dynamic` implements `ssr: false` by throwing a
* `BailoutToCSRError` during server rendering, which leaves
* `<template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING">` markers (empty,
* client-rendered suspense boundaries) in otherwise fully prerendered HTML:
* https://github.com/sanity-io/next-sanity/issues/2525
* Gated behind the mount check the component only ever renders in the browser,
* where `next/dynamic` doesn't throw.
*/
function SanityLiveLazyClientComponent(props) {
const [mounted, setMounted] = useState(false);
useEffect(() => {
startTransition(() => setMounted(true));
}, []);
if (!mounted) return null;
return /* @__PURE__ */ jsx(SanityLiveClientComponent, { ...props });
}
/**
* @internal CAUTION: this is an internal component and does not follow semver. Using it directly is at your own risk.
*/
const SanityLive = SanityLiveLazyClientComponent;
export { SanityLive };
//# sourceMappingURL=index.js.map