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>;
};
useSSE
use Server-Side effect ✨
A custum React hook which works like useEffect but can be used in SSR apps.
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.
On client side create BroswerDataContext and wrap your application in it.
const BroswerDataContext = createBroswerContext();
hydrate(
<BroswerDataContext>
<App />
</BroswerDataContext>,
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.
const { ServerDataContext, resolveData } = createServerContext();
renderToString(
<ServerDataContext>
<App />
</ServerDataContext>
);
const data = await resolveData();
res.write(data.toHtml());
const htmlStream = renderToNodeStream(
<ServerDataContext>
<App />
</ServerDataContext>
);