Integrate TanStack DB with Next.js, Remix, Nuxt, SvelteKit, and TanStack Start using client-side data patterns.
npx skills add https://github.com/TanStack/db --skill meta-framework
Please help me install this Agent Skill. Skill: meta-framework Source: https://github.com/TanStack/db/tree/main/packages/db/skills/meta-framework Command: npx skills add https://github.com/TanStack/db --skill meta-framework
Integrates TanStack DB with meta-frameworks to enable seamless client-side data management across Next.js, Remix, Nuxt, SvelteKit, and TanStack Start, while addressing SSR limitations.
Enable client-side rendering by setting ssr: false on routes and trigger collection.preload() in route loaders.
High-intent search queries and answers about installing and using this skill.
To use TanStack DB for client-side data management, disable SSR by setting ssr: false on routes and call collection.preload() inside route loaders to fetch data before rendering.
Yes, TanStack DB works with Next.js, Remix, Nuxt, SvelteKit, and TanStack Start. It provides a unified client-side data management API that adapts to each framework's specific loader and startup conventions.
Disabling SSR with ssr: false is required when integrating TanStack DB because it operates as a client-side only data layer. Route loaders handle initial data preloading via collection.preload() to support this rendering approach.
Route loaders preload collections in TanStack DB by calling collection.preload() during the route loading phase. This ensures the required data is fetched and ready for client-side components using useLiveQuery.
The best way to consume live queries in components after preloading TanStack DB collections is using the useLiveQuery hook. This pairs with route loaders that executed collection.preload() to deliver client-side only data.
The primary limitation is that TanStack DB requires a client-side only approach across meta-frameworks. You must disable SSR and rely entirely on route loaders to preload collections, restricting server-side rendering capabilities.
TanStackDefine type-safe route trees, loaders, and context for TanStack Router across React, Solid, and SSR.
janpeterdCreate reactive client-side data stores with live queries and optimistic mutations.
ovachieverBuild full-stack React apps on Cloudflare Workers with TanStack Start.
grvpanchalCoordinates SSR HTML generation, hydration, and data fetching for Next.js and Express applications.
