useSSE

use Server-Side effect ✨

npm GitHub Workflow Status GitHub followers

A custum React hook which works like useEffect but can be used in SSR apps.

See project page on Github.

See package in NPM.

Usage

On client side useSSE hook is very similar to useEffect.

First argument is the effect which must return a promise.

Returned promise resolves to data or rejects to error.

As a second argument it takes dependency array - just like in useEffect.


import { useSSE } from "use-sse";
  
const MyComponent = () => {
    const [data, error] = useSSE(
        
        
    );

    return <div>{data.title}</div>;
  };
  

On client side create BroswerDataContext and wrap your application in it.


const BroswerDataContext = createBroswerContext();

hydrate(
    
    document.getElementById("app")
);
  

Create ServerDataContext and resolveData helper.

Wrap your application in ServerDataContext. Next, render application for the first time.

Wait for all effects to resolve.

Inject resolved data into HTML.

Render your application for the second time.














Made with 🦄 by Kasper Moskwiak.