Search

Server Query

How to fetch on server with fresh data

To fetch fresh data in Server Components, use the serverQuery function.

Query Pattern

When fetching fresh data in Server Components, the following sequence occurs:

Fresh DataFetched directly from the APIAPISingaporeServerSan FranciscoBrowserSan Francisco
StepEnvironmentDescription
PreBrowserSends a request to the server for the website at https://example.com.
1ServerIf external data is required, fetches fresh data from the relevant API.
2ServerReceives the response from the API and sends the rendered HTML.
3BrowserReceives the response, hydrates the page, and displays the data.

GET Request

The following example fetches data on the server using a GET request. To ensure the data is always fresh, either set queryCache to false or omit it entirely.

import { serverQuery } from "@bigbang-sdk/next-query";

async function ServerComponent() {
  const { data, error } = await serverQuery({
        queryUrl: "https://api.example.com/data"
      });

  console.log(data, error);
}

POST Request

The following example fetches data on the server using a GET request. To ensure the data is always fresh, either set queryCache to false or omit it entirely.

import { serverQuery } from "@bigbang-sdk/next-query";

async function ServerComponent() {
  const { data, error } = await serverQuery({
        queryUrl: "https://api.example.com/data",
        queryOptions: {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ foo: "bar" }),
        },
      });

  console.log(data, error);
}

Made with

by Bigbang