ServerOnly

[kentcdodds]

Basically the opposite of ClientOnly.

This is useful for hidden inputs that help you know whether the form was submitted via fetch or not (which helps you determine whether you should use redirect or json).

Alternatively, I could just use the fallback prop of the ClientOnly, but the children prop is required there and I don't want anything rendered post-hydration.

Until this is added, I'll just use useHydrated.

[sergiodxa]

Let me see if I understood, you want something like this:

<ServerOnly>
  <input type="hidden" name="noJS" value="true" />
</ServerOnly>

And that should be added to the HTML on SSR but removed after that?

I usually do this https://sergiodxa.com/articles/progressively-enhance-the-usefetcher-hook-in-remix

<input type="hidden" name="no-js" value={String(!isHydrated)} />

I could give you the ServerOnly component tho.

[kentcdodds]

Yep, you've got the idea.

[sergiodxa]

@kentcdodds released v6.4.0, I just inverted the ternary inside ClientOnly so once hydrated it renders the fallback.

Let me know if it works for you!

[kentcdodds]

Thanks a lot!