meta-framework

Integrate TanStack DB with Next.js, Remix, Nuxt, SvelteKit, and TanStack Start using client-side data patterns.

3.9k|254|Updated Mar 11, 2025
One-click install
npx skills add https://github.com/TanStack/db --skill meta-framework
Or copy as Structured Prompt for Agent▼
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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

  • Client-side only data layer: SSR disabled, routes preload data via collection.preload().
  • Cross-framework compatibility: supports multiple popular meta-frameworks with a unified API.
  • Practical usage patterns: route loaders that preload collections and components that consume live queries.

Quick Start

Enable client-side rendering by setting ssr: false on routes and trigger collection.preload() in route loaders.

Frequently Asked Questions about meta-framework

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use TanStack DB for client-side data management in meta-frameworks?▼

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.

Does TanStack DB work with Next.js, Remix, Nuxt, and SvelteKit?▼

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.

Why do I need to disable SSR when integrating TanStack DB with meta-frameworks?▼

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.

How do route loaders preload collections in TanStack DB?▼

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.

What is the best way to consume live queries in components after preloading TanStack DB collections?▼

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.

Are there limitations when using TanStack DB across different meta-frameworks?▼

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.