Introducing Next Query :. Next Query is a data-fetching library for @nextjs that simplifies the process of retrieving data in both Server and Client Components. Learn more in 🧵👇

To learn more:. Website: Docs: Github: NPM: Happy querying! ✦.

// Server + Client Query. To fetch data using SWR (Stale-While-Revalidate), you can also combine the `serverQuery` and `clientQuery` functions. In this pattern, the cached data is sent from the server to the client upon the page request, and then is revalidated on the client.

// Server Query. In Server Components, `serverQuery` can be used to fetch in the two ways:. 1. Fresh data - data is fetched directly from the URL and is not cached. 2. Cached data - data is fetched from cache

// Client Query. In Client Components, `clientQuery` can be used to fetch in three ways:. 1. Fresh data - data is fetched directly from the URL and is not cached. 2. Cached data - data is fetched from cache. 3. SWR - data is fetched from cache and is revalidated on the client

// One Library, Multiple Patterns. Next Query provides two core functions: clientQuery and serverQuery. These functions can be used in different ways to support a variety of data fetching patterns.

Features at-a-glance :. - Fast, lightweight, and reusable data fetching.- Built-in support for SWR (Stale-While-Revalidate).- Automatic caching and revalidation.- Real-time-ready experience.- Powered by Next.js’s native fetch cache.- Fully typed with TypeScript support.

Built on top of Next.js’s built-in fetch cache, Next Query focuses on delivering a seamless, clutter-free experience. It abstracts away the complexities of data fetching—such as caching, revalidation, and SWR (Stale-While-Revalidate)—so you can focus on building your application.