Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kmoskwiak/useSSE
use Server-Side Effect ✨in React SSR app
https://github.com/kmoskwiak/useSSE
react server-side-rendering ssr useeffect
Last synced: 4 months ago
JSON representation
use Server-Side Effect ✨in React SSR app
- Host: GitHub
- URL: https://github.com/kmoskwiak/useSSE
- Owner: kmoskwiak
- License: mit
- Created: 2020-05-10T14:51:05.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-05T17:14:29.000Z (8 months ago)
- Last Synced: 2024-08-31T07:40:01.109Z (6 months ago)
- Topics: react, server-side-rendering, ssr, useeffect
- Language: TypeScript
- Homepage: https://kspr.dev/use-sse/
- Size: 1.95 MB
- Stars: 138
- Watchers: 2
- Forks: 10
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `use-sse` - use Server-Side Effect. `useEffect` both on client and server side. (Packages)
- awesome-react-hooks-cn - `use-sse` - use Server-Side Effect. `useEffect` both on client and server side. (Packages)
- awesome-react-hooks - `use-sse` - use Server-Side Effect. `useEffect` both on client and server side. (Packages)
- awesome-react-hooks - `use-sse` - use Server-Side Effect. `useEffect` both on client and server side. (Packages)
README
# useSSE 3.x.x-beta
> [!CAUTION]
> 3.x.x is still in beta
> [!NOTE]
> You are viewing a v3.x.x version of hook which is designed to be compatible with React 18. This version of hook is still in beta.
> If you are using React <18 check latest stable [2.x.x version of useSSE](https://github.com/kmoskwiak/useSSE/tree/v2.0.1)
[](https://www.npmjs.com/package/use-sse)
`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:
```jsx
import { useSSE } from "use-sse";
/**
* Create a custom component with effect
**/
const TitleComponent = () => {
const [data, error] = useSSE(() => {
return fetch("https://myapi.example.com").then((res) => res.json());
}, []);
return
{data.title}
;
};
/**
* To take full advantage of a Suspense boundaries wrap each component in UniversalDataProvider
* You can also use ServerDataProvider or BrowserDataProvider
**/
export const Title = () => {
return (
)
}
```
Load component using Suspense API:
```jsx
import * as React from 'react';
import Title from './Title';
export const App = () => (
);
```
All effects will be resolved on server side during rendering.
This is a part of server side render phase. See an example for the whole code.
```jsx
const stream = renderToPipeableStream(
,
{
onShellReady() {
res.statusCode = didError ? 500 : 200;
res.setHeader('Content-type', 'text/html');
stream.pipe(res);
},
onShellError() {
res.statusCode = 500;
res.send('
An error occurred
');
},
onError(err) {
didError = true;
console.error(err);
},
},
);
```
On client side of application use `BroswerDataContext`:
```jsx
hydrate(
,
document.getElementById("app")
);
```
## API
### useSSE
```js
const [data, error] = useSSE(effect, dependencies);
```
#### Params
| param | type | required | description | example |
| -------------- | -------------------- | -------- | -------------------------------------------------------- | -------------------------------------------------- |
| `effect` | `() => Promise` | 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.
## Examples
See [example](./example) directory for React with SSR and useSSE.
The same example is avaliable on [CodeSandbox](https://codesandbox.io/s/falling-waterfall-wnlwc?file=/README.md).