{"id":13782546,"url":"https://github.com/ABuffSeagull/parcel-plugin-prerender","last_synced_at":"2025-05-11T15:32:35.812Z","repository":{"id":51748826,"uuid":"141871764","full_name":"ABuffSeagull/parcel-plugin-prerender","owner":"ABuffSeagull","description":null,"archived":true,"fork":false,"pushed_at":"2021-05-10T08:46:40.000Z","size":3706,"stargazers_count":42,"open_issues_count":29,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-05T03:34:26.978Z","etag":null,"topics":["parcel","parcel-plugin","prerender","seo","spa","static-site-generator"],"latest_commit_sha":null,"homepage":null,"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/ABuffSeagull.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}},"created_at":"2018-07-22T06:31:09.000Z","updated_at":"2023-09-08T17:43:01.000Z","dependencies_parsed_at":"2022-08-26T01:10:17.933Z","dependency_job_id":null,"html_url":"https://github.com/ABuffSeagull/parcel-plugin-prerender","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ABuffSeagull%2Fparcel-plugin-prerender","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ABuffSeagull%2Fparcel-plugin-prerender/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ABuffSeagull%2Fparcel-plugin-prerender/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ABuffSeagull%2Fparcel-plugin-prerender/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ABuffSeagull","download_url":"https://codeload.github.com/ABuffSeagull/parcel-plugin-prerender/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253588758,"owners_count":21932320,"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":["parcel","parcel-plugin","prerender","seo","spa","static-site-generator"],"created_at":"2024-08-03T18:01:38.913Z","updated_at":"2025-05-11T15:32:35.218Z","avatar_url":"https://github.com/ABuffSeagull.png","language":"JavaScript","readme":"# parcel-plugin-prerender\n[![Known Vulnerabilities](https://snyk.io/test/github/abuffseagull/parcel-plugin-prerender/badge.svg)](https://snyk.io/test/github/abuffseagull/parcel-plugin-prerender)\n\n## About\n\nMuch like the [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin/blob/master/README.md)\nfor [Webpack](https://github.com/webpack/webpack), this plugin is to bring prerendering capabilities to\n[Parcel](https://github.com/parcel-bundler/parcel). It is meant to be a drop-in solution for any site or single-page-app.\n\n### Installation\n```\nnpm install parcel-plugin-prerender -D\n```\n\n### Usage\nBy default, this plugin will render the `/` path when building with parcel (i.e. `parcel build` or `process.env.NODE_ENV == \"production\"`).\nAs this plugin uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig),\nin order to configure the plugin,\npass the configuration options in a `prerender` key in your `package.json`,\nor a JSON or YAML `.prerenderrc` file, or export the config object in a `prerender.config.js` file.\n\n### Example\n\nIf you just want to render multiple routes, you can pass a plain array in any of the above ways:\n```json\n// .prerenderrc\n[\"/\", \"/about\", \"/login\", \"/deep/nested/route\"]\n```\n\nOtherwise, you must pass it in a `routes` key, in order to configure the renderer, as follows.\n\n### Render configuration\n\nYou can configure the renderer (browser) options by using the following example config:\n\n```json\n{\n  \"routes\": [\"/\", \"/about\"],\n  \"rendererConfig\": {\n    \"renderAfterDocumentEvent\": \"prerender-trigger\"\n  }\n}\n```\n\nThis is particularly useful if you'd like to pre-fetch some API data or async config\nand make that part of your pre-rendered HTML.\n\nIn the example above, the `/` and `/about` pages will only be rendered when the custom DOM event `prerender-trigger` is dispatched.\n\nYou can do so in your code like the following:\n\n```js\ndocument.dispatchEvent(new Event('prerender-trigger'));\n```\n\nThe custom configuration can also be useful for debugging. If the resulting html does not look like what you're expecting you could use the following configuration:\n\n```json\n{\n  \"routes\": [\"/\", \"/about\"],\n  \"rendererConfig\": {\n    \"headless\": false\n  }\n}\n```\n\nTo make the pre-render browser visible and you would be available to debug.\n\nTo see all the options available see this [documentation](https://github.com/Tribex/prerenderer#prerendererrenderer-puppeteer-options)\n\n## What is Prerendering?\n\nTo quote [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin/blob/master/README.md):\n\n\u003e Recently, SSR (Server Side Rendering) has taken the JavaScript front-end world by storm. The fact that you can now render your sites and apps on the server before sending them to your clients is an absolutely *revolutionary* idea (and totally not what everyone was doing before JS client-side apps got popular in the first place...)\n\u003e\n\u003e However, the same criticisms that were valid for PHP, ASP, JSP, (and such) sites are valid for server-side rendering today. It's slow, breaks fairly easily, and is difficult to implement properly.\n\u003e\n\u003e Thing is, despite what everyone might be telling you, you probably don't *need* SSR. You can get almost all the advantages of it (without the disadvantages) by using **prerendering.** Prerendering is basically firing up a headless browser, loading your app's routes, and saving the results to a static HTML file. You can then serve it with whatever static-file-serving solution you were using previously. It *just works* with HTML5 navigation and the likes. No need to change your code or add server-side rendering workarounds.\n\u003e\n\u003e In the interest of transparency, there are some use-cases where prerendering might not be a great idea.\n\u003e\n\u003e - **Tons of routes** - If your site has hundreds or thousands of routes, prerendering will be really slow. Sure you only have to do it once per update, but it could take ages. Most people don't end up with thousands of static routes, but just in-case...\n\u003e - **Dynamic Content** - If your render routes that have content that's specific to the user viewing it or other dynamic sources, you should make sure you have placeholder components that can display until the dynamic content loads on the client-side. Otherwise it might be a tad weird.\n\n## Available Renderers\n\nCurrently only `@prerenderer/renderer-puppeteer` is supported, although `@prerenderer/renderer-jsdom` \nwill probably be supported in the future\n","funding_links":[],"categories":["Plugins"],"sub_categories":["Other"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FABuffSeagull%2Fparcel-plugin-prerender","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FABuffSeagull%2Fparcel-plugin-prerender","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FABuffSeagull%2Fparcel-plugin-prerender/lists"}