Add ClientOnly
#1592
Add ClientOnly
#1592
Conversation
|
| export function ClientOnly(props: { | ||
| children?: JSX.Element, | ||
| }): JSX.Element { | ||
| if (sharedConfig.context) { |
There was a problem hiding this comment.
iirc this is the way to check if the app is currently hydrating. This check is needed so that UI correction can be applied, otherwise we can just render the children directly (since the app is just in CSR)
Pull Request Test Coverage Report for Build 4323318523Warning: This coverage report may be inaccurate.This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.
Details
💛 - Coveralls |
| @@ -258,3 +259,23 @@ export function ErrorBoundary(props: { | |||
| "_SOLID_DEV_" ? { name: "value" } : undefined | |||
| ) as Accessor<JSX.Element>; | |||
| } | |||
|
|
|||
| export function ClientOnly(props: { | |||
| children?: JSX.Element, | |||
There was a problem hiding this comment.
Is there a case where you'd want to use a self-closing <ClientOnly />?
There was a problem hiding this comment.
If there is a play, there is a player 😆
|
My only concern with this and why I did this with dynamic imports/compiler macro in SolidStart is if this will be sufficient for bundlers to drop the code. We told people to do this and they were having issues still since they used libraries that touched global APIs (like window, document) so this alone wasn't enough. At which point I was less into this approach on its own. I'm still trying to figure out if we can work this into Bling. But it is very framework specific when accounting for hydration. |
|
yeah I could probably do a |
|
Combining const MyLazyComponent = lazy(() => import("..."))
<ClientOnly>
<Suspense>
<MyLazyComponent />
</Suspense>
</ClientOnly> |
|
@thetarnav yes it should be. I provided |
|
Is this still not merged for some reason? Just for context! :) |
|
We have it in SolidStart so there hasn't been pressure to bring it back into core yet. Still trying it out so to speak. |
Summary
Finally took the initiative. This one is the missing piece to SSR components, as it has some common use cases (e.g. rendering a component with web-only dependency).
solid-starthas one but I'm just hoping that core is the best place to put this so that other SSR frameworks (like Astro) can also use this. The fact that this is one of the most requested solution insolid-startand possibly other SSR applications should be enough to motivate this to be in the core.How did you test this change?
The code is pretty basic, based on my 2-year old snippet: https://discord.com/channels/722131463138705510/722167424186843267/1022433627000291348
I just added some hydration checks + server code should be optimized to just return
undefineddirectly