Next.js Discord

Discord Forum

Providers with "use client" results in out of order loading?

Unanswered
Russian Spaniel posted this in #help-forum
Open in Discord
Russian SpanielOP
I've built a component lib and it relies on the correct loading of components (in sequence).

For example, using storybook with React:

Story 0
Provider 1
Button 2


So the Provider and them the Button gets loaded. This is the intended order.

I've got a BlitzJS instance running using Pages. Again Provider -> Button.
XX 2
Providers 0
Provider 1
Button 3


NextJS (app dir) with a providers.jsx and not using "use client". So only the server getting executed.

XX 2
XX 2
Providers 0
Provider 1
Providers 0
Provider 1
Button 3


Again this is the correct order.

But! Now using "use client" with providers.jsx

XX 2
XX 2
Button 3
XX 2
Providers 0
Provider 1


Why is Button 3 now at the top and now Provider at the bottom? How come the loading order is out of sync?

Here is the providers code:

// "use client";
import { Provider } from "@charizardxx/system";
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "../tailwind.config.js";

export function Providers({ children }: any) {
  console.log("Providers 0")
  const fullConfig = resolveConfig(tailwindConfig);
  const theme = (fullConfig.theme as any).custom;
  
  return (
    <Provider theme={theme}>
      <body>{children}</body>
    </Provider>
  );
}


Has anyone seen this before? Thanks

7 Replies

(like vscode terminal)
@alfon is this seen in the server console?
Russian SpanielOP
Yes.
fuma
Seems like Next.js first renders server components, and renders client components afterward
I didn't do a detailed test with that, but I can reproduce the same thing on my machine with the latest version of Next.js
Russian SpanielOP
I forgot to test. But if I also put the Button as a "use client". Then the order is correct. Which makes sense that both providers and button are then client components.

However this scenario is unsatisfactory for me. Vercel keeps on saying that "use client" is no big deal and that on the server pre-rendering does occur. But this breaks things...
alfon
Vercel keeps saying 'use client' is no big deal because vercel thinks that devs should develop code where the order of the render shouldn't matter
Russian SpanielOP
Closing this as I came up with a workaround.