Add serverSnapshot fallback to useSyncExternalStore

[daveycodez]

Introduces a serverSnapshot object and passes it as the server snapshot function to useSyncExternalStore in useLiveQuery. This improves compatibility with server-side rendering by providing a default snapshot value.

🎯 Changes

Fixes getServerSnapshot error on Next.js "use client" components without needing dynamic import.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 671c1e6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

More templates

• todos
• tanstack-start-db-projects-example
• @tanstack/db-example-react-todo
• @tanstack/db-example-solid-todo

@tanstack/angular-db

npm i https://pkg.pr.new/@tanstack/angular-db@688

@tanstack/db

npm i https://pkg.pr.new/@tanstack/db@688

@tanstack/db-ivm

npm i https://pkg.pr.new/@tanstack/db-ivm@688

@tanstack/electric-db-collection

npm i https://pkg.pr.new/@tanstack/electric-db-collection@688

@tanstack/query-db-collection

npm i https://pkg.pr.new/@tanstack/query-db-collection@688

@tanstack/react-db

npm i https://pkg.pr.new/@tanstack/react-db@688

@tanstack/rxdb-db-collection

npm i https://pkg.pr.new/@tanstack/rxdb-db-collection@688

@tanstack/solid-db

npm i https://pkg.pr.new/@tanstack/solid-db@688

@tanstack/svelte-db

npm i https://pkg.pr.new/@tanstack/svelte-db@688

@tanstack/trailbase-db-collection

npm i https://pkg.pr.new/@tanstack/trailbase-db-collection@688

@tanstack/vue-db

npm i https://pkg.pr.new/@tanstack/vue-db@688

commit: 671c1e6

[KyleAMathews]

Is this useful? I'm not sure I understand the point? You can't disable SSR in next.js?

[daveycodez]

Disabling SSR in Next.js results in slower page loads, and dynamic imports requires a lot of DX overhead that is unnecessary.

This also negatively impacts static export builds, since it prevents entire components from being rendered during the build phase if you put a dynamic client only import wrapper around it.

[daveycodez]

The main purpose is to be able to have SSR rendered skeletons or initialData during the !isReady & isLoading state, so we can serve the pages from edge cache. Having to put a dynamic wrapper around every useLiveQuery will make the hook unmaintainable in the majority of Next.js projects. I'm already testing my variant of this hook and I no longer have to use dynamic imports for it. It would be extremely useful for all of my projects to have this line of code added to the official package.

[samwillis]

I'm slightly nervous of this change as it suggested DB is safe to use on SSR routes, but I fear that collection.preload() in a route loader is currently unsafe with a global collection. We need to check this though as is only a suspicion, it may just slow things down and not leak data.

useLiveQuery being broken in SSR acts as a safeguard against this at the moment, until we fix SSR properly.