* WIP: new hydration methods

* refactor: genericize load/idle/visible renderers

* fix: do not pass "data-astro-id" to component

* docs: add hydration section to README

* docs: update README

Co-authored-by: Nate Moore <nate@skypack.dev>

2021-03-26 17:09:28 -05:00

1.1 KiB

Raw Blame History

👩‍🚀 Astro

A next-generation static-site generator with partial hydration. Use your favorite JS framework and ship bare-minimum JS (or none at all!).

🔧 Setup

npm install astro

TODO: astro boilerplate

💧 Partial Hydration

By default, Astro outputs zero client-side JS. If you'd like to include an interactive component in the client output, you may use any of the following techniques.

MyComponent:load will render MyComponent on page load
MyComponent:idle will use requestIdleCallback to render MyComponent as soon as main thread is free
MyComponent:visible will use an IntersectionObserver to render MyComponent when the element enters the viewport

🧞 Development

Add a dev npm script to your /package.json file:

{
  "scripts": {
    "dev": "astro dev ."
  }
}

Then run:

npm run dev

🚀 Build & Deployment

Add a build npm script to your /package.json file:

{
  "scripts": {
    "dev": "astro dev .",
    "build": "astro build ."
  }
}