Client utilities

Client-side Next.js provider, bootstrap decoding, and re-exported React hooks.

NextSyncProvider, bootstrap decoding utilities, and re-exported React hooks with "use client".


import {
  NextSyncProvider,
  decodeBootstrapSnapshot,
  deserializeBootstrapSnapshot,
  isBootstrapSnapshotStale,
  seedStorageFromBootstrap,
  isPrefetchStale,
  // All @stratasync/react hooks:
  useModel,
  useModelSuspense,
  useQuery,
  useQueryAll,
  useQueryCount,
  useConnectionState,
  useIsOffline,
  usePendingCount,
  useSync,

Client utilities: Client-side Next.js... · Strata Sync


"use client";

import { NextSyncProvider } from "@stratasync/next";
import { createSyncClient } from "@stratasync/client";

const client = createSyncClient({
  /* ... */
});

function Providers({ children }: { children: React.ReactNode }) {
  return (
    <NextSyncProvider
      client={client}
      loading={<FullPageSpinner />}
      error={(err) => <ErrorPage message={err.message} />}
      onReady={() => console.log("Sync ready")}
      onError={(err) => console.error("Sync failed", err)}
    >
      {children}
    </NextSyncProvider>
  );
}

Prop	Type	Default	Description
`client`	`SyncClient \| (() => SyncClient)`	Required	Sync client instance or lazy factory.
`children`	`ReactNode`	Required	Child components.
`loading`	`ReactNode`	`null`	Shown while the client initializes.
`error`	`(error: Error) => ReactNode`	-	Error renderer. If not provided, the error is thrown for an error boundary.
`onReady`	`() => void`	-	Callback when the client is ready.
`onError`	`(error: Error) => void`	-	Callback when initialization fails.


import { seedStorageFromBootstrap } from "@stratasync/next";
import { createIndexedDbStorage } from "@stratasync/storage-idb";

const result = await seedStorageFromBootstrap({
  storage: createIndexedDbStorage(),
  snapshot: bootstrapSnapshot,
  dbName: "my-app-sync",
  clearExisting: true,
  validateSchemaHash: true,
  batchSize: 500,
  closeAfter: true,
});

if (result.applied) {
  console.log(`Seeded ${result.rowCount} rows`);
} else {
  console.log(`Skipped: ${result.reason}`);
}

Option	Type	Default	Description
`storage`	`StorageAdapter`	Required	Storage adapter instance.
`snapshot`	`BootstrapSnapshot \| BootstrapSnapshotPayload \| string`	Required	The bootstrap data to seed.
`dbName`	`string`	`"sync-db"`	Database name.
`clearExisting`	`boolean`	`true`	Clear storage before seeding.
`validateSchemaHash`	`boolean`	`true`	Validate schema hash matches.
`batchSize`	`number`	`500`	Number of rows per write batch.
`closeAfter`	`boolean`	`true`	Close storage after seeding.
`schema`	`SchemaDefinition \| ModelRegistrySnapshot`	-	Schema for hash validation.

Field	Type	Description
`applied`	`boolean`	Whether the seed was applied.
`rowCount`	`number`	Number of rows seeded.
`reason`	`"schema_mismatch" \| undefined`	Reason if not applied.

Client utilities

Client utilities

NextSyncProvider

NextSyncProviderProps

Initialization lifecycle

Lazy client factory

Bootstrap decoding

decodeBootstrapSnapshot

deserializeBootstrapSnapshot

isBootstrapSnapshotStale

seedStorageFromBootstrap

Prefetch utilities

isPrefetchStale

Re-exported hooks