Next.js Discord

Discord Forum

"Works in dev, not in prod" Debugging

Unanswered
Blanc de Hotot posted this in #help-forum
Open in Discord
Blanc de HototOP
hey all, are there any recommended methods of finding out where something may have gone wrong if a client component isn't retrieving data from a Suspense-wrapped server component? it works perfectly fine locally and i've also tried deploying with a forced cache refresh.

i'll outline the exact structure of the issue in the following comment.

15 Replies

James4u
So you must be fetching data inside your server component and passing data down to the client component (which is a child component)?
Blanc de HototOP
correct
James4u
okay so first of all, try production build on your local
npm run build & npm run start instead of npm run build
Blanc de HototOP
i've tried this
James4u
that works fine you are saying?
Blanc de HototOP
yep!
James4u
can you share some of your code snippet?
Blanc de HototOP
some additional details:
- environment variables defined in development and production
- root level layout.tsx has a suspense-wrapped server component, which fetches data using environment variables
- client component is used as a child of the server component, uses useState/useEffect to get updated values

---
vercel deployment has the same exact environment variables set up.
-> i can see in production that the server component fetched the data correctly
-> client component did not receive the data from its parent
Blanc de HototOP
layout.tsx // Root level. Returns DOM like this:
<html lang="en">
  <body>
    <Suspense fallback={<RotateCw />}>
      <DynamicNavigation />
    </Suspense>
    { children }
  </body>
</html>
...

-----
DynamicNavigation.tsx // Server component.

export default async function DynamicNavigation() {
  const SOME_VARS = {
    a: process.env.a,
    b: process.env.b,
  }

  const someData = await getData(SOME_VARS[a]);
  
  return (<SomeClientComponent data={someData} />
}
also it might be worth noting that i'm on v13.4.19
James4u
well you can upgrade your next.js version first
btw what's the result? you get the blank screen?
Blanc de HototOP
when i inspect my production, i can see that server component received the data, but the client component didn't
Blanc de HototOP
next 14 is sooo different from next 13
@Blanc de Hotot next 14 is sooo different from next 13
James4u
? what's that different?