https://github.com/camme/progressive-loadable
Progressively load and hydrate components when they are in the viewport.
https://github.com/camme/progressive-loadable
hydration loadable progressive react ssr
Last synced: about 2 months ago
JSON representation
Progressively load and hydrate components when they are in the viewport.
- Host: GitHub
- URL: https://github.com/camme/progressive-loadable
- Owner: camme
- License: mit
- Created: 2019-06-01T15:29:25.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:47:18.000Z (over 3 years ago)
- Last Synced: 2025-07-20T15:24:43.936Z (11 months ago)
- Topics: hydration, loadable, progressive, react, ssr
- Language: JavaScript
- Size: 204 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: readme.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# ProgressiveLoadable
This helps you progressively load and hydrate components when they are in the viewport. It should be used together with [react-loadable](https://www.npmjs.com/package/react-loadable)
to enable code splitting.
Code splitting and progressive hydration are extremly effective tricks to downsize the first chunks of javascript you load in the browser, but still
showing the correct content the user loads into the browser (with server side rendering).
So instead of just server side render and then hydrate everything,
you render everything on the server, then hydrate the parst that are visible and wait with everything that is outside the viewport until the user scrolls.
When your component is visible, you load the chunks and hydrate the last part.
## How to use
A normal ```react-loadable``` is loaded like this
```javascript
import Loadable from 'react-loadable';
import Loading from './my-loading-component';
const LoadableComponent = Loadable({
loader: () => import('./my-component'),
loading: Loading,
});
export default class App extends React.Component {
render() {
return ;
}
}
```
With ProgressiveLoadable you only need to change it like this:
```javascript
import Loadable from 'react-loadable';
import Loading from './my-loading-component';
const LoadableComponent = Loadable({
loader: () => import('./my-component'),
loading: Loading,
});
// THIS IS THE EXTRA WRAPPER
const ProgressiveLoadableComponent = ProgressiveLoadable(LoadableComponent);
export default class App extends React.Component {
render() {
return ; // THIS IS CHANGED AS WELL
}
}
```
If you want to change the default threshold (default is ```.3```, ie 30% of the component needs to be visible), you just send it as options:
```javascript
import Loadable from 'react-loadable';
import Loading from './my-loading-component';
const LoadableComponent = Loadable({
loader: () => import('./my-component'),
loading: Loading,
});
const ProgressiveLoadableComponent = ProgressiveLoadable(LoadableComponent, { threshold: .5 });
export default class App extends React.Component {
render() {
return ;
}
}
```
## Other info
This uses the IntersectionObserver, which doesnt exists in ie 11. In ie 11, or other browsers without the IntersectionObserver, it will just assume the component
is in the viewport.