use-sse v2.0.1

useSSE

useSSE is abbreviation for use server-side effect. It is a custom React hook to perform asynchronous effects both on client and serve side.

npm i use-sse

Usage

Use useSSE to fetch data in component:

import React from "react";
import { useSSE } from "use-sse";

const MyComponent = () => {
  const [data, error] = useSSE(() => {
    return fetch("https://myapi.example.com").then((res) => res.json());
  }, []);

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

All effects will be resolved on server side during rendering.

This is a part of server side render phase. Se an example for the whole code.

const { ServerDataContext, resolveData } = createServerContext();

// We need to render app twice.
// First - render App to reqister all effects
renderToString(
  <ServerDataContext>
    <App />
  </ServerDataContext>
);

// Wait for all effects to finish
const data = await resolveData();

// Inject into html initial data
res.write(data.toHtml());

// Render App for the second time
// This time data form effects will be avaliable in components
const htmlStream = renderToNodeStream(
  <ServerDataContext>
    <App />
  </ServerDataContext>
);

On client side of application use BroswerDataContext:

// This will create context will all data fetched during server side rendering
const BroswerDataContext = createBroswerContext();

hydrate(
  <BroswerDataContext>
    <App />
  </BroswerDataContext>,
  document.getElementById("app")
);

API

useSSE

const [data, error] = useSSE(effect, dependencies);

Params

Returns

Returns an array with two elements [data, error].

• data - resolved response from effect
• error - an error if effect rejected or if timeout happend.

createServerContext()

Creates server side context.

const { ServerDataContext, resolveData } = createServerContext();

Returns

ServerDataContext - React context provider component.

<ServerDataContext>
  <App />
</ServerDataContext>

resolveData - function to resolve all effects.

const data = await resolveData(timeout);

data is an object containing value of context.

Calling data.toHtml(variableName) will return a html script tak with stringified data:

data.toHtml();
// "<script>window._initialDataContext = { context data };</script>"

Both should be used in server side render function.

createBroswerContext()

Creates client side context.

createBroswerContext(variableName);

params

returns

BroswerDataContext - React context provider for client side application

<BroswerDataContext>
  <App />
</BroswerDataContext>

Examples

See example directory for React with SSR and useSSE.

The same example is avaliable on CodeSandbox.