Documentation
Getting Started
Functions
Guides
Concepts
Server Query
How to fetch on server with fresh dataTo fetch fresh data in Server Components, use the serverQuery
function.
When fetching fresh data in Server Components, the following sequence occurs:
Step | Environment | Description |
---|---|---|
Pre | Browser | Sends a request to the server for the website at https://example.com . |
1 | Server | If external data is required, fetches fresh data from the relevant API. |
2 | Server | Receives the response from the API and sends the rendered HTML. |
3 | Browser | Receives the response, hydrates the page, and displays the data. |
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);
}
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