doc: conditional HydrationOverlay example

[BenjaminLesne]

Currently, the README says we should not use the HydrationOverlay in production but do not show any example of how to deactivate it in production.

I use this conditional provider for HydrationOverlay in my app. I thought I could share it :shrug:

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 4335eba24346c9b68b79d167976e44ad45dd75bc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[samijaber]

The biggest drawback of having this script is not so much HydrationOverlay, but rather the (webpack) plugin that injects a script into the entry point. That would add client-side logic on hydration that could potentially alter SEO scores, etc.

So if you want to add a conditional, it would be in the plugin logic to disable altering webpack.entry in production...which you can't do as an end-user without us adding a prop.

Hence why I opted to just have a warning, but not an error, in case the user is purposely leaving the plugin in production.

[BenjaminLesne]

@samijaber Oh yeh I completely forgot about that... So how am I suppose to handle that right now? Manually remove the plugin from my config before building?

if you want to add a conditional, it would be in the plugin logic to disable altering webpack.entry in production...which you can't do as an end-user without us adding a prop

Is adding that prop problematic?

Sorry for all those questions, I'm just trying to understand. I would love to contribute to this library!

[samijaber]

Your options:

• keep the plugin in production: this will increase bundle size due to the dependencies imported by HydrationOverlay, and might impact SEO/page-load since there is a (super super tiny) script that executes on hydration.
• only use the plugin local dev, and remember to remove it before merging/deploying to production
• contribute a stripInProduction config to the plugin that:
  • disables the plugin if stripInProduction === true + we are in production
  • is also passed to HydrationOverlay, and does not render <Overlay /> if stripInProduction === true + we are in production. I am not 100% sure if that will reduce bundle size as intended, might depend on the bundler of your webapp.

[BenjaminLesne]

I'm lacking of time to do this feature I'm closing it