What changes in vercel build vs the local build?

I have the following setup:

PostList Component: Fetches and renders all the posts PostDetail Component: Fetches and renders the selected post

For better UX, when the user navigates from the post detail page to individual post page I use the already fetched post data from the detail page as a placeholder and stream the rest of the data as and when they are fetched.

This works as expected in my local and build environments, where the user is instantly navigated to the detail page and the user data being fetched is streamed in.

local_build

But when I deploy the application to vercel it waits for all the page data to be fetched before the user is navigated to the detail page

vercel_build

Does it has to do with how vercel renders the page on deployment? What am I missing here?

Hi, !

Exciting to see your project Great work!

The key differences that make this work consistently in both environments are:

Using Server Components by default for data fetching
Implementing proper loading states with Suspense
Leveraging Next.js App Router's built-in parallel routes and streaming

This approach ensures that:

Data fetching happens on the server
Loading states are shown consistently
Navigation is smooth in both development and production
The user experience is consistent across environments

The main reason you might see differences between local and production builds is often related to how development mode handles streaming and suspense boundaries differently for better debugging. By properly implementing suspense boundaries and loading states, you can ensure consistent behavior across environments.

Feel free to share your code with us, otherwise ask v0! Might help you fix this faster.