{"id":23920437,"url":"https://github.com/preactjs/vite-prerender-plugin","last_synced_at":"2025-04-11T21:50:52.317Z","repository":{"id":220588249,"uuid":"752040578","full_name":"preactjs/vite-prerender-plugin","owner":"preactjs","description":"Plugin for prerendering Vite applications in any framework","archived":false,"fork":false,"pushed_at":"2025-03-15T21:30:19.000Z","size":211,"stargazers_count":27,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-07T09:30:10.956Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/preactjs.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},"funding":{"github":["preactjs"],"open_collective":"preact"}},"created_at":"2024-02-02T22:01:23.000Z","updated_at":"2025-03-24T07:34:57.000Z","dependencies_parsed_at":"2024-02-02T23:08:21.020Z","dependency_job_id":"fb47f0c4-e7f3-4ed3-ac79-02cc926fa4a5","html_url":"https://github.com/preactjs/vite-prerender-plugin","commit_stats":{"total_commits":44,"total_committers":2,"mean_commits":22.0,"dds":0.06818181818181823,"last_synced_commit":"d581f932af6c4b1236595bebc161b6eebaca8973"},"previous_names":["rschristian/vite-prerender-plugin","preactjs/vite-prerender-plugin"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fvite-prerender-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fvite-prerender-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fvite-prerender-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fvite-prerender-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/preactjs","download_url":"https://codeload.github.com/preactjs/vite-prerender-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247745447,"owners_count":20989019,"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":"2025-01-05T15:35:57.746Z","updated_at":"2025-04-11T21:50:52.284Z","avatar_url":"https://github.com/preactjs.png","language":"JavaScript","funding_links":["https://github.com/sponsors/preactjs","https://opencollective.com/preact"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003evite-prerender-plugin\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cpicture width=\"100\"\u003e\n    \u003cimg src=\"./media/logo.png\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eEffortless prerendering in every framework\u003c/p\u003e\n\n---\n\nThis is largely an extracted implementation of [@preact/preset-vite](https://github.com/preactjs/preset-vite)'s prererender functionality ([license](https://github.com/preactjs/preset-vite/blob/main/LICENSE)), which in turn is a reimplementation of [WMR](https://github.com/preactjs/wmr)'s prerendering ([license](https://github.com/preactjs/wmr/blob/main/LICENSE)).\n\n## Getting Started\n\n```bash\n$ npm install vite-prerender-plugin\n```\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport { vitePrerenderPlugin } from 'vite-prerender-plugin';\n\nexport default defineConfig({\n    plugins: [vitePrerenderPlugin()],\n});\n```\n\nTo prerender your app, you'll need to do three things:\n\n1. Set your `renderTarget` via the plugin option. This should, in all likelihood, match the query selector for where you render your app client-side, i.e., `render(\u003cApp /\u003e, document.querySelector('#app'))` -\u003e `'#app'`\n\n2. Specify your prerender script, which can be done by a) adding a `prerender` attribute to one of the scripts listed in your entry HTML (`\u003cscript prerender src=\"./my-prerender-script.js\"\u003e`) or b) use the `prerenderScript` plugin option to specify the location of your script with an absolute path\n\n3. Export a function named `prerender()` from your prerender script (see below for an example)\n\nThe plugin simply calls the prerender function you provide so it's up to you to determine how your app should be prerendered, likely you'll want to use the `render-to-string` implementation of your framework. This prerender function can be sync or async, so feel free to initialize your app data with `fetch()` calls, read local data with `fs.readFile()`, etc. All that's required is that your return an object containing an `html` property which is the string of HTML you want injected into your HTML document.\n\nWith that, you're all ready to build!\n\nFor full examples, please see the [examples directory](./examples), and if you don't see your framework listed, let me know! I can take a look to see at adding it.\n\n## Options\n\n| Option                      | Type     | Default       | Description                                                                                                                                                                                                                                                    |\n| --------------------------- | -------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `renderTarget`              | `string` | `\"body\"`      | Query selector for where to insert prerender result in your HTML template                                                                                                                                                                                      |\n| `prerenderScript`           | `string` | `undefined`   | Absolute path to script containing exported `prerender()` function. If not provided, the plugin will try to find the prerender script in the scripts listed in your HTML entrypoint                                                                            |\n| `additionalPrerenderRoutes` | `string` | `undefined`   | While the prerendering process can automatically find new links in your app to prerender, sometimes you will have pages that are not linked to but you still want them prerendered (such as a `/404` page). Use this option to add them to the prerender queue |\n| `previewMiddlewareFallback` | `string` | `/index.html` | Fallback path to be used when an HTML document cannot be found via the preview middleware, e.g., `/404` or `/not-found` will be returned when the user requests `/some-path-that-does-not-exist`                                                               |\n\n## Advanced Prerender Options\n\nAdditionally, your `prerender()` function can return more than just HTML -- it can return additional links to prerender as well as information that should be set in the `\u003chead\u003e` of the HTML document, such as title, language, or meta tags. For example:\n\n```js\nexport async function prerender(data) {\n    const html = '\u003ch1\u003ehello world\u003c/h1\u003e';\n\n    return {\n        html,\n\n        // Optionally add additional links that should be\n        // prerendered (if they haven't already been)\n        links: new Set(['/foo', '/bar']),\n\n        // Optional data to serialize into a script tag for use on the client:\n        //   \u003cscript type=\"application/json\" id=\"prerender-data\"\u003e{\"url\":\"/\"}\u003c/script\u003e\n        data: { url: data.url },\n\n        // Optionally configure and add elements to the `\u003chead\u003e` of\n        // the prerendered HTML document\n        head: {\n            // Sets the \"lang\" attribute: `\u003chtml lang=\"en\"\u003e`\n            lang: 'en',\n\n            // Sets the title for the current page: `\u003ctitle\u003eMy cool page\u003c/title\u003e`\n            title: 'My cool page',\n\n            // Sets any additional elements you want injected into the `\u003chead\u003e`:\n            //   \u003clink rel=\"stylesheet\" href=\"foo.css\"\u003e\n            //   \u003cmeta property=\"og:title\" content=\"Social media title\"\u003e\n            elements: new Set([\n                { type: 'link', props: { rel: 'stylesheet', href: 'foo.css' } },\n                { type: 'meta', props: { property: 'og:title', content: 'Social media title' } },\n            ]),\n        },\n    };\n}\n```\n\nFor those not using `preact-iso` (be it not using Preact at all or simply using other tools), this library exposes a `parseLinks` function which you can use to crawl your site for links to prerender. The function takes an HTML string and returns an array of links found in the document. To be valid, they must have an `href` attribute set and the `target` attribute, if set, must be `_self`.\n\n```js\nexport async function prerender() {\n    const html = `\n        \u003cdiv\u003e\n            \u003ca href=\"/foo\"\u003eFoo\u003c/a\u003e\n            \u003ca href=\"/bar\" target=\"_blank\"\u003eBar\u003c/a\u003e\n            \u003ca href=\"/baz\" target=\"_top\"\u003eBaz\u003c/a\u003e\n        \u003c/div\u003e\n    `;\n\n    const { parseLinks } = await import('vite-prerender-plugin/parse');\n    const links = parseLinks(html); // ['/foo']\n\n    return {\n        html,\n        links: new Set(links),\n    };\n}\n```\n\n\u003e **Note**: Anything you want to be server-only, like `parseLinks` from the example above, should be dynamically imported in the prerender function. A static import will see that code included in your client bundle, inflating it for a code path that will never run.\n\n## Licenses\n\n[MIT](https://github.com/preactjs/vite-prerender-plugin/blob/master/LICENSE)\n\n[WMR - MIT](https://github.com/preactjs/wmr/blob/main/LICENSE)\n\n[Preact Vite Preset - MIT](https://github.com/preactjs/preset-vite/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpreactjs%2Fvite-prerender-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpreactjs%2Fvite-prerender-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpreactjs%2Fvite-prerender-plugin/lists"}