Documentation
Getting Started
Functions
Guides
Concepts
Overview
What is Next Query?Next Query is a data-fetching library for Next.js that simplifies the process of retrieving data in both Server and Client Components.
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.
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.
When caching is enabled, both functions utilize Next.js’s native fetch cache to store and retrieve data. However, while this cache is natively available in Server Components, it is not accessible in Client Components. To bridge this gap, clientQuery uses API route handlers to access the server-side cache from the client.
By enabling access to the cache on the client, Next Query ensures instant page loads—cached data is shared across browsers, sessions, and users. Additionally, the cache enables real-time updates using the SWR (Stale-While-Revalidate) pattern.
In Client Components, clientQuery can be used to fetch data in the following ways:
When using this pattern, the data is fetched directly from the fetch URL and is not cached.
When using this pattern, the data is fetched from Next.js's native fetch cache via an API route handler.
When using this pattern, the data is fetched from Next.js's native fetch cache and is revalidated when the component is mounted on the client.
In Server Components, serverQuery can be used to fetch data in the following ways:
When using this pattern, the data is fetched directly from the fetch URL and is not cached.
When using this pattern, the data is fetched from Next.js's native fetch cache.
To fetch data using SWR (Stale-While-Revalidate) while leveraging both Server and Client Components, you can 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 when the component is mounted on the client, the data is revalidated.
Since the data is fetched on the server, it's included in the initial page load, significantly improving perceived performance.
We welcome contributions! To get started:
git commit -m "feat: add new feature"
main branch.If you encounter bugs or have feature suggestions, please open an issue.
This project is licensed under the MIT License.
Made with
by Bigbang