@bigbang-sdk/next-query NPM

Introduction

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.

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

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.

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.

1. Client Query

Client Components, clientQuery can be used to fetch data in the following ways:

Fresh data

When using this pattern, the data is fetched directly from the fetch URL and is not cached.

Cached data

When using this pattern, the data is fetched from Next.js's native fetch cache via an API route handler.

SWR

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.

2. Server Query

Server Components, serverQuery can be used to fetch data in the following ways:

Fresh data

When using this pattern, the data is fetched directly from the fetch URL and is not cached.

Cached data

When using this pattern, the data is fetched from Next.js's native fetch cache.

3. Server + Client Query

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.