https://github.com/hadeeb/react-lazy-hydration

Lazy Hydration for Server Rendered React Components
https://github.com/hadeeb/react-lazy-hydration

hydration lazy-loading react ssr

Last synced: 15 days ago
JSON representation

Lazy Hydration for Server Rendered React Components

• Host: GitHub
• URL: https://github.com/hadeeb/react-lazy-hydration
• Owner: hadeeb
• License: mit
• Created: 2019-01-19T12:48:49.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-02-20T17:43:38.000Z (9 months ago)
• Last Synced: 2024-09-22T09:38:35.873Z (about 2 months ago)
• Topics: hydration, lazy-loading, react, ssr
• Language: TypeScript
• Homepage:
• Size: 342 KB
• Stars: 372
• Watchers: 4
• Forks: 22
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Lazy Hydration

Lazy Hydration for Server Rendered React Components

## Installation

```bash

npm i react-lazy-hydration

```

OR

```bash

yarn add react-lazy-hydration

```

## Usage

```jsx

import React from "react";

import LazyHydrate from "react-lazy-hydration";

function App() {

  return (

    


      {/* Skip Hydrating  */}

      

        {...}

      

      {/* Requires IntersectionObserver. Polyfill not included. */}

      

        {...}

      

      {/* Requires requestIdleCallback. Polyfill not included. */}

      

        {...}

      

      {/* Hydrate on any of the following events */}

      

        {...}

      

    

  );

}

```


## Notes

Based on this [comment](https://github.com/facebook/react/issues/10923#issuecomment-338715787)

and heavily adapted from [Lazy hydration for Vue SSR](https://github.com/znck/lazy-hydration)

## Contribute

First off, thanks for taking the time to contribute!

Now, take a moment to be sure your contributions make sense to everyone else.

### Reporting Issues

Found a problem? Want a new feature? First of all see if your issue or idea has [already been reported](https://github.com/hadeeb/react-lazy-hydrate/issues).

If not, just open a [new clear and descriptive issue](https://github.com/hadeeb/react-lazy-hydrate/issues/new).

### Submitting pull requests

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.