Writing performant Hydrogen apps

[jplhomer]

Inspired by feedback and conversations we've had with you during the developer preview, we've written some guidelines for improving the performance of Hydrogen apps, including:

• Avoid overfetching
• Strategic use of Suspense boundaries
• Smaller server bundle size

Please take a look and let me know if you have any feedback!

[davidhousedev]

These are awesome!

On the topic of performance optimization, the Suspense waterfall detected warning is something that I've wanted to read more about, but haven't found many resources. I've seen it mentioned in https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries but haven't found any other references to it. Some questions I've had:

• What are the strategies for determining where the warning originates from, e.g. in the component tree?
• Why is this warning sometimes yellow, and sometimes red?
• Generally, the warning appears on the first request before preloading kicks in, should I pay more attention to this warning when it doesn't go away after a preload? What if I can't preload the query that triggers the warning?

[blittle]

cc @wizardlyhel

[jplhomer]

but haven't found many resources

Ha, this isn't surprising, as we're one of the only frameworks doing component-level Suspense data fetching at the moment.

I'll defer to @wizardlyhel for answers to the above, but I will preface this by saying our preload cache and Suspense waterfall detection is definitely a v1 and has lots of room for improvement.

One potential enhancement could be passing request to useQuery so you can preload every time, and grab whatever you need (cookies, etc) to make the query happen.

[wizardlyhel]

The warning has a simple detection logic. Maybe I should check if preload options is set to false and that would turn off the warning for that particular fetch.

The warning is:

• Yellow - when the query has 1 waterfall chain
• Red - when the query have 2 or more waterfall chain

You should pay attention to the warning when it doesn't go away - that being said, we should probably not show the warning if no preload query is detected.

When the warning appear, it is usually caused by the last query logged before the warning. But good feedback, we should just log out the query name that is causing the error

[wizardlyhel]

Issue created Shopify/hydrogen#1337

[blittle]

Tracking some perf initiatives here: Shopify/hydrogen#1476