{"id":15011737,"url":"https://github.com/preactjs/preact-ssr-prepass","last_synced_at":"2025-07-24T20:06:02.785Z","repository":{"id":42997362,"uuid":"188549588","full_name":"preactjs/preact-ssr-prepass","owner":"preactjs","description":"Drop-in replacement for react-ssr-prepass","archived":false,"fork":false,"pushed_at":"2024-07-14T06:43:56.000Z","size":407,"stargazers_count":49,"open_issues_count":14,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-22T09:50:30.945Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/preactjs.png","metadata":{"funding":{"github":["preactjs"],"open_collective":"preact"},"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"2019-05-25T09:59:02.000Z","updated_at":"2024-11-22T14:43:08.000Z","dependencies_parsed_at":"2024-11-05T20:37:39.835Z","dependency_job_id":null,"html_url":"https://github.com/preactjs/preact-ssr-prepass","commit_stats":{"total_commits":61,"total_committers":9,"mean_commits":6.777777777777778,"dds":0.6721311475409837,"last_synced_commit":"2f63c40fb8c152f29df5ae255fc0e9d4cb05501a"},"previous_names":["sventschui/preact-ssr-prepass"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/preactjs/preact-ssr-prepass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreact-ssr-prepass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreact-ssr-prepass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreact-ssr-prepass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreact-ssr-prepass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/preactjs","download_url":"https://codeload.github.com/preactjs/preact-ssr-prepass/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreact-ssr-prepass/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266897228,"owners_count":24002644,"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","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-09-24T19:41:35.030Z","updated_at":"2025-07-24T20:06:02.761Z","avatar_url":"https://github.com/preactjs.png","language":"JavaScript","funding_links":["https://github.com/sponsors/preactjs","https://opencollective.com/preact"],"categories":[],"sub_categories":[],"readme":"# preact-ssr-prepass\n\n[![npm](https://img.shields.io/npm/v/preact-ssr-prepass.svg)](http://npm.im/preact-ssr-prepass)\n[![Coverage Status](https://coveralls.io/repos/github/sventschui/preact-ssr-prepass/badge.svg?branch=master\u0026t=G8Cc9D)](https://coveralls.io/github/sventschui/preact-ssr-prepass?branch=master)\n[![OpenCollective Backers](https://opencollective.com/preact/backers/badge.svg)](#backers)\n[![OpenCollective Sponsors](https://opencollective.com/preact/sponsors/badge.svg)](#sponsors)\n[![travis](https://travis-ci.com/sventschui/preact-ssr-prepass.svg?branch=master)](https://travis-ci.com/sventschui/preact-ssr-prepass)\n\n\n\u003e Drop-in replacement for `react-ssr-prepass`.\n\nNeither Preact nor React support `Suspense` on the server as of now. Heavily inspired by `react-ssr-prepass`, `preact-ssr-prepass` provides a two-pass approach with which `Suspense` can be used on the server. In the first pass, `preact-ssr-prepass` \nwill create a VNode tree and await all suspensions, in the second pass `preact-render-to-string`\ncan be used to render a vnode to a string.\n\nEven if `preact-ssr-prepass` is designed to do as little as possible, it still adds a slight \noverhead since the VNode tree is created twice.\n\n⚠️ Note that this is neither an official Preact nor React API and that the way `Suspense` is handled\non the server might/will change in the future!\n\n# Usage / API\n\n## Awaiting suspensions\n\n`preact-ssr-prepass` needs to be called just before rendering a vnode to a string. See the following\nexample:\n\nlazy.js:\n```js\nexport default function LazyLoaded() {\n    return \u003cdiv\u003eI shall be loaded and rendered on the server\u003c/div\u003e\n}\n```\n\nindex.js:\n```js\nimport { createElement as h } from 'preact';\nimport { Suspense, lazy } from 'preact/compat';\nimport renderToString from 'preact-render-to-string';\nimport prepass from 'preact-ssr-prepass';\n\nconst LazyComponent = lazy(() =\u003e import('./lazy'));\n\nconst vnode = (\n    \u003cSuspense fallback={\u003cdiv\u003eI shall not be rendered on the server\u003c/div\u003e}\u003e\n        \u003cLazyComponent /\u003e\n    \u003c/Suspense\u003e\n);\n\nprepass(vnode)\n    .then(() =\u003e {\n        // \u003cdiv\u003eI shall be loaded and rendered on the server\u003c/div\u003e\n        console.log(renderToString(vnode));\n    });\n```\n\n## Custom suspensions/data fetching using the visitor\n\n`preact-ssr-prepass` accepts a second argument that allows you to suspend on arbitrary elements:\n\n```js\nssrPrepass(\u003cApp /\u003e, (element, instance) =\u003e {\n  if (instance !== undefined \u0026\u0026 typeof instance.fetchData === 'function') {\n    return instance.fetchData()\n  }\n});\n```\n\n## API\n\n```js\n/**\n * Visitor function to suspend on certain elements.\n * \n * When this function returns a Promise it is awaited before the vnode will be rendered.\n */\ntype Visitor = (element: preact.VNode, instance: ?preact.Component) =\u003e ?Promise\u003cany\u003e;\n\n/**\n * The default export of preact-ssr-prepass\n *\n * @param{vnode} preact.VNode The vnode to traverse\n * @param{visitor} ?Visitor A function that is called for each vnode and might return a Promise to suspend.\n * @param{context} ?Object Initial context to be used when traversing the vnode tree\n * @return Promise\u003cany\u003e Promise that will complete once the complete vnode tree is traversed. Note that even if\n *         a Suspension throws the returned promise will resolve.\n */\nexport default function prepass(vnode: preact.VNode, visitor?: Visitor, context:? Object): Promise\u003cany\u003e;\n```\n\n## Replace react-ssr-prepass (e.g. next.js)\n\n`react-ssr-prepass` is usually used on the server only and not bundled into your bundles but rather\nrequired through Node.js. To alias `react-ssr-prepass` to `preact-ssr-prepass` we recommend to use\n`module-alias`:\n\nCreate a file named `alias.js`:\n```js\nconst moduleAlias = require('module-alias')\n\nmodule.exports = () =\u003e {\n  moduleAlias.addAlias('react-ssr-prepass', 'preact-ssr-prepass')\n}\n```\n\nRequire and execute the exported function in your applications entrypoint (before require'ing `react-ssr-prepass`):\n```js\nrequire('./alias')();\n```\n\n# Differences to `react-ssr-prepass`\n\nThe visitor passed to `preact-ssr-prepass` gets a Preact element instead of a React one. When you use `preact/compat`'s `createElement` it will make the element/vnode look as similar to a React element as possible.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpreactjs%2Fpreact-ssr-prepass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpreactjs%2Fpreact-ssr-prepass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpreactjs%2Fpreact-ssr-prepass/lists"}