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
param | type | required | description | example |
---|---|---|---|---|
effect |
() => Promise<any> |
true | effect function returning promise which resolves to data | () => fetch('example.com').then(res=>res.json()) |
dependencies |
any[] |
false | list of dependencies like in useEffect | [] |
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);
param | type | required | default value | description |
---|---|---|---|---|
timeout |
number |
false | undefined |
max number of ms to wait for effects to resolve |
data
is an object containing value of context.
Calling data.toHtml(variableName)
will return a html script tak with stringified data:
param | type | required | default value | description |
---|---|---|---|---|
variableName |
string |
false | _initialDataContext | name of global variable |
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
param | type | required | default value | description |
---|---|---|---|---|
variableName |
string |
false | _initialDataContext | name of global variable |
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.