Fluvials

[aretrace]

Summary

Have non-SSR (client:only) components in SSR components (client:load).

Background & Motivation

Sometimes only a small portion of a client component depends on or requires client only functionality that can't be server rendered. Instead of authoring separate components files in such cases, it would be nice having a client directive for intracomponent partial hydration.

Example

// component.tsx - server rendered

import { someClientOnlyThing, someIsomorphicSafeThing } from "@external/src/module"

export default function Component() {
  return (
    <>
      <span>{someIsomorphicSafeThing.toString()}</span>
      <SubComponent client:only />
    </>
  );
}

function SubComponent() {
  return (
    <>
      <button onClick={someClientOnlyThing}></button>
    </>
  );
}

[delucis]

client:* directives depend on the Astro compiler so need to be in .astro files, but you might be able to do this with composition I think:

// component.tsx
import { someClientOnlyThing, someIsomorphicSafeThing } from "@external/src/module"

export function SafeComponent({ children }) {
  return (
    <>
      <span>{someIsomorphicSafeThing.toString()}</span>
      {children}
    </>
  );
}

export function ClientOnlyComponent() {
  return (
    <>
      <button onClick={someClientOnlyThing}></button>
    </>
  );
}

---
import { SafeComponent, ClientOnlyComponent } from './component.tsx';
---

<SafeComponent client:load>
  <ClientOnlyComponent client:only />
</SafeComponent>

[aretrace]

Yeah, having astro mess with client components themselves is a bit too much of an ask for. Your pattern is a great way to emulate the pattern I'm looking for!

[aretrace]

@delucis your pattern makes a lot of sense, but unfortunately it seems not to work 😢
it appears that when using any exported function component, the entire module is evaluated
as a result, even just importing (without actually using) any non-client-safe imports can render the defined components incompatible SSR 😭
in other words, only this is possible (per your pseudo-example):

...
<SafeComponent client:only> <!-- can't client:load, will fail -->
  <ClientOnlyComponent client:only />
</SafeComponent>
...

[delucis]

Ah, you may need to separate the safe/“dangerous” components into separate files?

For example, here’s a small demo of this behaviour working with the client-only component not logging any messages on server render: https://stackblitz.com/edit/github-vz1xb3?file=src%2Fcomponents.tsx,src%2Fpages%2Findex.astro

But if the client-only component does anything on import (vs just on render), then that might still need to be a separate code path to avoid triggering those things during the server render.