[Next.js 15] - Part 12. How a Slow Data Source Can Block Your Whole Page

Ace Lennox

03 Jan 20254 minutes to read

1. The Challenge of Slow Data Fetching

While fetching local or fast data is straightforward and nearly instant, this isn’t always the case. Slow data fetching can arise due to:

External APIs: You rely on third-party APIs that are outside your control, and they might have latency issues.
Database Queries: Direct database queries in server components may be slow due to large datasets or heavy load.

This delay can become the weakest link in your page rendering, as it blocks the entire page from being returned to the user until the data is ready.

2. Simulating Slow API Response

To understand this problem, let’s simulate a slow API response:

Stop the JSON Server: If the JSON server is running, stop it.
Modify the package.json File:
Add a delay parameter to simulate a slow API response. For example:

"scripts": {
    "json-server": "json-server --watch db.json --delay 5000"
}

Here, the --delay 5000 parameter simulates a 5-second delay (5000ms) for all API responses.
Restart the JSON Server: Run the command:
npm run json-server
Refresh the API:
Visit your API endpoint in the browser. You’ll notice that the response now takes 5 seconds to load.

3. Disabling Cache for Testing

To observe the impact of slow data fetching:

Open your fetch code in the server component.
Set the fetch option cache: "no-store" to disable caching:

const data = await fetch("http://localhost:3000/api/data", {
    cache: "no-store",
}).then((res) => res.json());

Disabling the cache ensures that each request fetches fresh data from the API, simulating the real-world scenario of slow fetching.

Refresh the page, and you should notice:
- The spinner appears while waiting for data.
- The entire page is blocked for 5 seconds until the data is fetched.

4. Key Takeaways

Slow Data Fetching Blocks Rendering:
The entire page waits for slow data to load before being sent to the user.
Always Prepare for Latency:
Even with a reliable data source, you should plan for occasional delays to maintain a smooth user experience.

5. Next Steps

Now that we’ve identified the issue, we’ll explore solutions to handle slow data fetching effectively, including strategies like:

Suspense and Streaming: Rendering parts of the page while waiting for slower data.
Optimistic Updates: Showing placeholders or partial content to improve perceived speed.
Server-side Caching and Revalidation: Reducing the need for repeated slow fetches.