michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

docs(#628): Clarify component rendering

Browse source 
Every component is rendered on the server at build time. Hydration directives _optionally_ add client-side hydration at runtime.
This commit is contained in:
Nate Moore 2021-07-08 11:50:12 -05:00 committed by GitHub
parent 6287ec2b8e
commit ee4bcb5729
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
docs/core-concepts/component-hydration.md
View file

@ -3,14 +3,14 @@ layout: ~/layouts/Main.astro
title: React, Svelte, Vue, etc.
---
By default, Astro generates your site with zero client-side JavaScript. If you use any frontend UI components (React, Svelte, Vue, etc.) Astro will automatically render them to HTML and strip away any client-side JavaScript. This keeps your site default-fast.
By default, Astro generates your site with zero client-side JavaScript. If you use any frontend UI components (React, Svelte, Vue, etc.) Astro will automatically render them **on the server**, generating only HTML and CSS without any client-side JavaScript. This makes your site as fast as possible by default.
```
---
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- By default: Astro renders this to HTML
and strips away all JavaScript. -->
<!-- By default: Astro renders this on the server,
generating HTML and CSS, but no client-side JavaScript. -->
<MyReactComponent />
```
@ -25,11 +25,11 @@ With Astro, you can hydrate these components individually, without forcing the r
## Hydrate Frontend Components
To hydrate your components in the client, you may use any of the following techniques:
Astro renders every component on the server at build time. To hydrate your components on the client at runtime, you may use any of the following techniques:
- `<MyComponent:load />` will render the component on page load.
- `<MyComponent:idle />` will use [requestIdleCallback()][mdn-ric] to render the component as soon as main thread is free.
- `<MyComponent:visible />` will use an [IntersectionObserver][mdn-io] to render the component when the element enters the viewport.
- `<MyComponent:load />` will hydrate the component on page load.
- `<MyComponent:idle />` will use [requestIdleCallback()][mdn-ric] to hydrate the component as soon as main thread is free.
- `<MyComponent:visible />` will use an [IntersectionObserver][mdn-io] to hydrate the component when the element enters the viewport.
## Hydrate Astro Components