{"id":13450873,"url":"https://github.com/kmoskwiak/useSSE","last_synced_at":"2025-03-23T16:32:27.859Z","repository":{"id":40768915,"uuid":"262809605","full_name":"kmoskwiak/useSSE","owner":"kmoskwiak","description":"use Server-Side Effect ✨in React SSR app","archived":false,"fork":false,"pushed_at":"2024-07-05T17:14:29.000Z","size":2047,"stargazers_count":140,"open_issues_count":28,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-28T17:39:35.877Z","etag":null,"topics":["react","server-side-rendering","ssr","useeffect"],"latest_commit_sha":null,"homepage":"https://kspr.dev/use-sse/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kmoskwiak.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["kmoskwiak"]}},"created_at":"2020-05-10T14:51:05.000Z","updated_at":"2024-10-22T13:32:32.000Z","dependencies_parsed_at":"2024-07-31T07:12:34.010Z","dependency_job_id":null,"html_url":"https://github.com/kmoskwiak/useSSE","commit_stats":{"total_commits":60,"total_committers":4,"mean_commits":15.0,"dds":"0.19999999999999996","last_synced_commit":"fc0f1a2f67011464a7ceff35a095becfde2bbcb6"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kmoskwiak%2FuseSSE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kmoskwiak%2FuseSSE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kmoskwiak%2FuseSSE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kmoskwiak%2FuseSSE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kmoskwiak","download_url":"https://codeload.github.com/kmoskwiak/useSSE/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245131071,"owners_count":20565763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","server-side-rendering","ssr","useeffect"],"created_at":"2024-07-31T07:00:39.613Z","updated_at":"2025-03-23T16:32:27.523Z","avatar_url":"https://github.com/kmoskwiak.png","language":"TypeScript","funding_links":["https://github.com/sponsors/kmoskwiak"],"categories":["Packages","TypeScript"],"sub_categories":[],"readme":"# useSSE 3.x.x-beta\n\n\u003e [!CAUTION]\n\u003e 3.x.x is still in beta\n\n\u003e [!NOTE]\n\u003e 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.\n\u003e If you are using React \u003c18 check latest stable [2.x.x version of useSSE](https://github.com/kmoskwiak/useSSE/tree/v2.0.1)\n\n![useSSE](https://repository-images.githubusercontent.com/262809605/78398700-a279-11ea-9ba2-4c15b6a1ec9a)\n[![npm version](https://badgen.net/npm/v/use-sse)](https://www.npmjs.com/package/use-sse)\n![Node.js CI](https://github.com/kmoskwiak/useSSE/workflows/CI/badge.svg?branch=master)\n\n`useSSE` is abbreviation for use server-side effect. It is a custom React hook to perform asynchronous effects both on client and serve side.\n\n```\nnpm i use-sse\n```\n\n## Usage\n\nUse `useSSE` to fetch data in component:\n\n```jsx\nimport { useSSE } from \"use-sse\";\n\n/**\n * Create a custom component with effect \n **/\nconst TitleComponent = () =\u003e {\n  const [data, error] = useSSE(() =\u003e {\n    return fetch(\"https://myapi.example.com\").then((res) =\u003e res.json());\n  }, []);\n\n  return \u003ch1\u003e{data.title}\u003c/h1\u003e;\n};\n\n/**\n * To take full advantage of a Suspense boundaries wrap each component in UniversalDataProvider \n * You can also use ServerDataProvider or BrowserDataProvider\n **/\nexport const Title = () =\u003e {\n\treturn (\n\t\t\u003cUniversalDataProvider\u003e\n\t\t\t\u003cTitleComponent /\u003e\n\t\t\u003c/UniversalDataProvider\u003e\n\t)\n}\n```\n\nLoad component using Suspense API:\n\n```jsx\nimport * as React from 'react';\nimport Title from './Title';\n\nexport const App = () =\u003e (\n\t\u003cdiv\u003e\n\t\t\u003cReact.Suspense fallback={'Loading...'}\u003e\n\t\t\t\u003cTitle/\u003e\n\t\t\u003c/React.Suspense\u003e\n\t\u003c/div\u003e\n);\n```\n\nAll effects will be resolved on server side during rendering.\n\nThis is a part of server side render phase. See an example for the whole code.\n\n```jsx\nconst stream = renderToPipeableStream(\n\t\t\u003cApp /\u003e,\n\t\t{\n\t\t\tonShellReady() {\n\t\t\t\tres.statusCode = didError ? 500 : 200;\n\t\t\t\tres.setHeader('Content-type', 'text/html');\n\t\t\t\tstream.pipe(res);\n\t\t\t},\n\t\t\tonShellError() {\n\t\t\t\tres.statusCode = 500;\n\t\t\t\tres.send('\u003ch1\u003eAn error occurred\u003c/h1\u003e');\n\t\t\t},\n\t\t\tonError(err) {\n\t\t\t\tdidError = true;\n\t\t\t\tconsole.error(err);\n\t\t\t},\n\t\t},\n\t);\n```\n\nOn client side of application use `BroswerDataContext`:\n\n```jsx\nhydrate(\n  \u003cApp /\u003e,\n  document.getElementById(\"app\")\n);\n```\n\n## API\n\n### useSSE\n\n```js\nconst [data, error] = useSSE(effect, dependencies);\n```\n\n#### Params\n\n| param          | type                 | required | description                                              | example                                            |\n| -------------- | -------------------- | -------- | -------------------------------------------------------- | -------------------------------------------------- |\n| `effect`       | `() =\u003e Promise\u003cany\u003e` | true     | effect function returning promise which resolves to data | `() =\u003e fetch('example.com').then(res=\u003eres.json())` |\n| `dependencies` | `any[]`              | false    | list of dependencies like in useEffect                   | []                                                 |\n\n#### Returns\n\nReturns an array with two elements `[data, error]`.\n\n- `data` - resolved response from effect\n- `error` - an error if effect rejected or if timeout happend.\n\n\n\n## Examples\n\nSee [example](./example) directory for React with SSR and useSSE.\n\nThe same example is avaliable on [CodeSandbox](https://codesandbox.io/s/falling-waterfall-wnlwc?file=/README.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkmoskwiak%2FuseSSE","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkmoskwiak%2FuseSSE","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkmoskwiak%2FuseSSE/lists"}