[BUG] serverProps is always empty in server components

[ramiroazar]

Describe the bug

When using useServerProps in any server components, including routes, serverProps is always empty.

I'm running into this while trying to share data between client and server as described below.

https://shopify.dev/custom-storefronts/hydrogen/framework/work-with-rsc#sharing-data-between-client-and-server

My understanding is that it's recommended to execute requests to Shopify on the server, but not sure how to achieve this if the request relies on client data and the recommended mechanism for sharing data with the server doesn't seem to make it available to server components?

Interestingly, accessing server props from route props like the example below works as expected.

https://shopify.dev/custom-storefronts/hydrogen/framework/server-props#example

Worth noting that using useServerProps in server components also throws the following warning.

Warning: Only ServerContext is supported in Flight.

This is related to Shopify/hydrogen#2042.

To Reproduce

1. Nest client component inside server component (e.g. <ServerComponent><ClientComponent /></ServerComponent>)
2. Use setServerProps in client component (e.g. onClick={() => setServerProps('key', 'value')})
3. Log serverProps in both client and server components (e.g. console.log(serverProps))
4. Note serverProps returns {key: 'value'} in client component and {} in server component

Expected behaviour

serverProps should return {key: 'value'} instead of {} in the server component, like it does in the client component.

Additional context

• Hydrogen version: 1.3.0
• Node version: 16.15.1
• Device details: Linux Manjaro 21.3.6 (Ruah)

[ramiroazar]

After working with this some more, it seems that useServerProps is reserved for client components and that this is intended behaviour.

I think it might be worth calling this out in the useServerProps documentation if that's the case.

Instead of trying to access serverProps within nested server components, the useRequestContext hook can be used within route components to add server props to the context, which can then be accessed by nested server components in the same way.

Apparently request context is an experimental feature, but hopefully this functionality will continue to work, it's super useful.

[shopify[bot]]

Oxygen deployed a preview of your fd-fix-hmr branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
skeleton	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 2, 2024 7:20 AM

Learn more about Hydrogen's GitHub integration.

[jamalsoueidan]

Which release is this to use it? 👯

[blittle]

@jamalsoueidan once it's merged to main, it will be available in a next tagged released on NPM. It will ship with our May release, which will be in the next week or two.

[jamalsoueidan]

@jamalsoueidan once it's merged to main, it will be available in a next tagged released on NPM. It will ship with our May release, which will be in the next week or two.

Is it possible to use this locally right now? It's making my head explode....right now the fetcher.data is also cached...

[jamalsoueidan]

@juanpprieto How can I use this? which release version?

[frandiox]

@jamalsoueidan Try npm i -D @shopify/mini-oxygen@next

[jamalsoueidan]

jamalsoueidan@jamals-macbook-pro booking-store % npm run dev:tunnel

[email protected] dev:tunnel shopify hydrogen dev --codegen --customer-account-push__unstable

Port 3000 is in use, trying another one...

Starting tunnel...

╭─ error ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ │ We couldn't find the cloudflare tunnel plugin │ │ │ │ To investigate the issue, examine this stack trace: │ │ at startTunnelPlugin (@shopify/cli-hydrogen/dist/lib/tunneling.js:12) │ │ throw new BugError(We couldn't find the ${provider} tunnel plugin); │ │ at async startTunnelAndPushConfig (@shopify/cli-hydrogen/dist/lib/dev-shared.js:53) │ │ const tunnel = await startTunnelPlugin(cliConfig, port, "cloudflare"); │ │ at all │ │ at async runViteDev (@shopify/cli-hydrogen/dist/commands/hydrogen/dev-vite.js:173) │ │ const [tunnel, cliCommand] = await Promise.all([ │ │ at run (@shopify/cli-hydrogen/dist/commands/hydrogen/dev.js:70) │ │ const { close } = await hasViteConfig(directory ?? process.cwd()) ? await import('./dev-vite.js').then( │ │ at async runCLI (@shopify/cli-kit/src/public/node/cli.ts:95) │ │ await run(undefined, config) │ │ at async runShopifyCLI (@shopify/cli/src/index.ts:42) │ │ await runCLI({ │ │

[juanpprieto]

Port 3000 is in use, trying another one...

You have another Hydrogen instance or other process running on this port. Try to stop it and it should be ok

[jamalsoueidan]

Port 3000 is in use, trying another one...

You have another Hydrogen instance or other process running on this port. Try to stop it and it should be ok

I will give it a try, maybe the process didn't terminate, thank you @juanpprieto

[jamalsoueidan]

Port 3000 is in use, trying another one...

You have another Hydrogen instance or other process running on this port. Try to stop it and it should be ok

This was not the issue, this started to happen after: Try npm i -D @shopify/mini-oxygen@next

[frandiox]

@jamalsoueidan This has been released in [email protected].

I'd suggest using h2 upgrade to get proper version of packages because the issue you posted sounds related to a version mismatch with other Shopify CLI things (tunneling, etc).

[michenly]

@jamalsoueidan, [email protected] was released yesterday. Just in case there is a timing confusion on what you tired.

[jamalsoueidan]

I will give it a try @frandiox @michenly