Collection definitions and queries work the same across frameworks. The host owns routing, rendering, and refreshing page data.
Framework patterns
| Framework | Query location | Development refresh |
|---|---|---|
| Void | .server.ts page companions and shared middleware |
Clear router caches, then refresh loader data |
| React Router | Server loaders in parent and child routes | revalidator.revalidate() |
| TanStack Start | Server functions called by route loaders | router.invalidate() |
| Angular | Server API routes consumed by Angular Router resolvers | ContentQuery CLI watch triggers Angular CLI rebuilds |
| SvelteKit | +page.server.ts and +layout.server.ts |
refreshAll() |
| Next.js | Server Components and route metadata functions | Generated modules trigger Next.js HMR |
Choose an integration
The Vite-based examples use the Vite plugin and content-query:server. The Next.js integration wraps the configuration with withContentQuery() from content-query/next and maps #content-query to the generated server entry through package.json imports. The adapter awaits initial generation, owns development watching and shutdown, and performs a one-shot build in production with Turbopack or Webpack.
The native Angular example uses @angular/ssr and Angular Router. It runs content-query build before Angular compilation and imports the physical .content-query/server.js entry in server-only API handlers. Router resolvers consume those APIs through HttpClient, and Angular transfers the initial responses during hydration. Development runs content-query build --watch alongside ng serve; generated module changes trigger Angular rebuilds and page reloads. Production runs the built Node SSR server.
The repository's content-query/examples/ directory contains runnable examples for all six frameworks. Keep collection configuration and the prepared server runtime out of browser code.