Add support for client:only hydrator

[tony-sull]

RFC #751

Changes

Adding support for client:only hydration to skip components during SSR

Testing

The astro-dynamic.test.js suite was updated to include test coverage for:

• client:only components are skipped during SSR
• renderer scripts are included in the build
• renderer scripts can be loaded

Docs

Component hydration docs have been updated to include client:only

[changeset-bot]

🦋 Changeset detected

Latest commit: 10bc040

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
astro	Minor

Not sure what this means? Click here to learn what changesets are.

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

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

astro-www – ./www

🔍 Inspect: https://vercel.com/pikapkg/astro-www/4zAtNdT3Rb7WantKJsk4Y7tSuGWJ
✅ Preview: https://astro-www-git-fork-tony-sull-client-only-hydration-pikapkg.vercel.app

[Deployment for 10bc040 canceled]

astro-docs – ./docs

🔍 Inspect: https://vercel.com/pikapkg/astro-docs/6U8ms3QLsKE61YCBw5QUYV3roGS9
✅ Preview: https://astro-docs-git-fork-tony-sull-client-only-hydration-pikapkg.vercel.app

[matthewp]

Thanks @tony-sull ! One thing missing from this is, we need to remove the import statements when client:only is used. One of the main use-cases for using client:only is when a dependency doesn't work in Node.js

I would create a test where a component depends on browser APIs... maybe it uses document.addEventListener in the module body. That will throw in Node.js.

To remove the import statement might be a little tricky because we compile the JS part before walking the HTML AST. Discovery of components happens here: https://github.com/snowpackjs/astro/blob/main/packages/astro/src/compiler/codegen/index.ts#L441

However, we won't know that an import needs to be removed until we've walked the HTML AST and found the client:only attr.

Idea: can we have compileModule return a function instead? That way we still have an opportunity to modify the AST inside of compileHtml. What I'm suggesting is that this part: https://github.com/snowpackjs/astro/blob/main/packages/astro/src/compiler/codegen/index.ts#L483-L487

would be wrapped in a function that only gets called after walking the HTML AST part.

[tony-sull]

Think I'm finally getting close on this one! Delaying the component imports took much more knowledge of Astro's compiler than I realized 😄

The last piece I think I'm missing is including the correct renderer without actually executing the client-only component on the server

[matthewp]

@tony-sull I think if you leave the import in at first the correct renderer will be added. Then remove it at the end of codegen. That's why I was suggesting to change the signature of that function to return a function rather than the JS string, that way you can modify the AST when walking the HTML part of the tree. Hope this helps.

[tony-sull]

@tony-sull I think if you leave the import in at first the correct renderer will be added. Then remove it at the end of codegen. That's why I was suggesting to change the signature of that function to return a function rather than the JS string, that way you can modify the AST when walking the HTML part of the tree. Hope this helps.

Thanks for your help here @matthewp!

I may very well be misunderstanding a key bit here, but I'm not sure if that would do the trick for finding the right renderer. The import has to be removed before __astro_component is called in the build, but __astro_component is what actually inspects the compiled Component to decide which renderer to include in the hydration script.

I ended up solving how to remove the import slightly differently and may need to move it to use the callback function mentioned, but I'm not quite sure yet how to have __astro_component find the correct hydration renderer for the component since it can't be imported and passed as a prop to __astro_component

[FredKSchott]

Will leave for others to review but overall +1 on this feature! Thanks for working to make it a reality, @tony-navillus !

[matthewp]

@tony-sull is this ready to be merged?

[tony-sull]

@tony-sull is this ready to be merged?

@matthewp Just pushed the final update to match renderers by full name (+ shorthand for @astrojs renderers)

The push ~30 min ago was just me rebasing from main before the final commit