Skip to content

SSR and hydration support for @tanstack/vue-db #1963

Description

@KyleAMathews

Follow-up to #1623 (Phase 6). #1564 added core DbClient, collection descriptors, dehydration/hydration, and React/Svelte integrations. The current SSR guide explicitly leaves Vue client-provider work for a later change.

Goal

Support server rendering of Vue live queries with a request-scoped DbClient, then hydrate the same result into a stable browser client. Keep Vue-native reactivity and existing non-SSR useLiveQuery usage.

Acceptance criteria

  • Provide an idiomatic Vue app/client scope (for example, provide/inject) so live queries can resolve collection descriptors against the correct DbClient. A fresh server client is used per request; direct collection inputs continue to work.
  • A server render can preload a collection or live query, render its rows, and serialize dbClient.dehydrate() without sharing state between requests.
  • The browser hydrates that state before the first live-query read, renders matching initial rows and order, and hands off to normal sync without duplicate rows or a hydration mismatch.
  • Add an integration or E2E test using real Vue server render and browser hydration. Cover request isolation and a post-hydration live update.
  • Document Vue setup, the supported query forms, and any remaining SSR limits (including infinite queries if they need separate work).

Use the existing core SSR payload and observer contracts; a new cross-framework payload format is outside this issue.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions