https://github.com/kirkstrobeck/hydrator
https://github.com/kirkstrobeck/hydrator
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kirkstrobeck/hydrator
- Owner: kirkstrobeck
- License: apache-2.0
- Created: 2018-12-02T19:47:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-03T04:57:40.000Z (over 6 years ago)
- Last Synced: 2025-03-27T12:46:38.452Z (2 months ago)
- Language: JavaScript
- Size: 128 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hydrator 🎈
**[Example](https://kirkstrobeck.github.io/hydrator/example/)**
### Reduce bundle size by pruning unnecessary hydrations
Get all the benefits of building in React without the processing and bundle size burdens of redundant hydration. In other words, React doesn’t need to control everything.
For example, if you have a component that generates your nav and that nav won’t change based on props or state, then it shouldn’t be JS on the client. It can be JS when rendering on the server and HTML/CSS when shipped.
## How does it work?
Server-side rendering remains unchanged. However, the client-side hydration bundle is limited to specific DOM entry points.
Use `hydrator` to specify hydration areas. Any area that is unspecified will not ship to the client and will not hydrate; it will merely be HTML/CSS.
## What does this mean?
- It means you don’t need a complicated templating approach. You can use React everywhere and not pay the penalty.
- It is an opportunity to think thru interaction points that have the same or nearly the same functionality with an HTML/CSS approach — for example, a CSS drop-down menu or a hidden checkbox that toggles a visual state.