{"id":15586658,"url":"https://github.com/innei/next-suspense","last_synced_at":"2025-06-17T14:35:29.451Z","repository":{"id":47899080,"uuid":"513064236","full_name":"Innei/next-suspense","owner":"Innei","description":"A suspense wrapper for NextJS when change router and fetching data in CSR.","archived":false,"fork":false,"pushed_at":"2023-10-25T00:52:27.000Z","size":244,"stargazers_count":6,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-24T04:45:34.884Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"next-suspense-navy.vercel.app","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/Innei.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2022-07-12T08:41:38.000Z","updated_at":"2023-08-03T05:57:28.000Z","dependencies_parsed_at":"2024-10-02T21:41:06.889Z","dependency_job_id":"abc56050-f664-4f5c-af17-79545a81b673","html_url":"https://github.com/Innei/next-suspense","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":"innei-template/rollup-typescript-lib","purl":"pkg:github/Innei/next-suspense","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innei%2Fnext-suspense","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innei%2Fnext-suspense/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innei%2Fnext-suspense/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innei%2Fnext-suspense/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Innei","download_url":"https://codeload.github.com/Innei/next-suspense/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Innei%2Fnext-suspense/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260380090,"owners_count":23000204,"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":[],"created_at":"2024-10-02T21:40:55.176Z","updated_at":"2025-06-17T14:35:24.432Z","avatar_url":"https://github.com/Innei.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next Suspense\n\nA suspense wrapper for NextJS when change router and fetching data in CSR.\n\n## Motivation\n\nAs we know, Next will fetching data in router change, and waiting for request finished then render the next page.\n\nWe hope only use blocked fetch data (aka. `getInitialProps`) for first screen of my app because of SSR. And when changing pages (in CSR), it can work as a SPA that will responsive user interactive immediately.\n\n![image](https://user-images.githubusercontent.com/41265413/210218632-31a542b3-2639-477b-88ec-ad83db32af5f.png)\n\n\nWhen the Next Router change, and next page has `getInitialProps` method that needed to called. We suspenses it, and render Loading Component immediately and fetching data at the same time. After fetching data successfully, then render Page B.\n\n## Requirement\n\n- NextJS 12 (or 13 disabled app dir)\n\n## Install\n\n```\nnpm i next-suspense\n```\n\n## Usage\n\n```tsx\n// utils/wrapper.tsx\nimport { wrapperNextPage } from 'next-suspense/esm'\n\nexport const wrapper: typeof wrapperNextPage = (NextPage, options) =\u003e\n  wrapperNextPage(NextPage, {\n    ErrorComponent: (props) =\u003e \u003cdiv\u003eError: {JSON.stringify(props.error)}\u003c/div\u003e,\n    LoadingComponent: () =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e,\n    ...options,\n  })\n\n// pages/home.tsx\nimport type { NextPage } from 'next'\nimport Link from 'next/link'\nimport React from 'react'\nimport { sleep } from 'utils'\nimport { wrapper } from 'utils/wrapper'\n\nconst IndexPage: NextPage\u003c{\n  bio: string\n}\u003e = (props) =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eWith Fetching data\u003c/p\u003e\n\n      \u003cp\u003eFetched Data:\u003c/p\u003e\n      \u003cpre\u003e{JSON.stringify(props.bio, null, 2)}\u003c/pre\u003e\n\n      \u003cbr /\u003e\n    \u003c/div\u003e\n  )\n}\n\nIndexPage.getInitialProps = async () =\u003e {\n  await sleep(1000)\n  return {\n    bio: 'bio from fetched request',\n  }\n}\n\nexport default wrapper(IndexPage)\n\n```\n\n## License\n\n2022 © Innei, Released under the MIT License.\n\n\u003e [Personal Website](https://innei.ren/) · GitHub [@Innei](https://github.com/innei/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finnei%2Fnext-suspense","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finnei%2Fnext-suspense","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finnei%2Fnext-suspense/lists"}