{"id":1317,"url":"https://github.com/brillout/awesome-universal-rendering","name":"awesome-universal-rendering","description":"Awesome resources about server side sendering (SSR), static rendering, pre-rendering, static site generators (SSG).","projects_count":74,"last_synced_at":"2026-08-05T18:00:22.749Z","repository":{"id":38214036,"uuid":"140283155","full_name":"brillout/awesome-universal-rendering","owner":"brillout","description":"Awesome resources about server side sendering (SSR), static rendering, pre-rendering, static site generators (SSG).","archived":false,"fork":false,"pushed_at":"2019-09-15T17:48:15.000Z","size":33,"stargazers_count":351,"open_issues_count":0,"forks_count":26,"subscribers_count":13,"default_branch":"master","last_synced_at":"2026-07-17T11:04:57.164Z","etag":null,"topics":["awesome","awesome-list","server-rendering","server-side-rendering","ssr"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brillout.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"license.md","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-09T12:37:27.000Z","updated_at":"2026-05-27T20:12:30.000Z","dependencies_parsed_at":"2022-07-13T04:51:38.329Z","dependency_job_id":null,"html_url":"https://github.com/brillout/awesome-universal-rendering","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/brillout/awesome-universal-rendering","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brillout%2Fawesome-universal-rendering","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brillout%2Fawesome-universal-rendering/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brillout%2Fawesome-universal-rendering/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brillout%2Fawesome-universal-rendering/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brillout","download_url":"https://codeload.github.com/brillout/awesome-universal-rendering/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brillout%2Fawesome-universal-rendering/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36318289,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-08-05T02:00:06.619Z","response_time":104,"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"}},"created_at":"2024-01-04T17:49:30.664Z","updated_at":"2026-08-05T18:00:22.750Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Learning Material","Tools"],"sub_categories":["SEO/SMO","How to implement SSR","General discussion","React","Vue","View Library Agnostic","Angular"],"readme":"\u003c!---\n\n\n\n\n\n\n    WARNING, READ THIS.\n    This is a computed file. Do not edit.\n    Instead, edit `/readme.template.md` and run `npm run docs` (or `yarn docs`).\n\n\n\n\n\n\n\n\n\n\n\n\n    WARNING, READ THIS.\n    This is a computed file. Do not edit.\n    Instead, edit `/readme.template.md` and run `npm run docs` (or `yarn docs`).\n\n\n\n\n\n\n\n\n\n\n\n\n    WARNING, READ THIS.\n    This is a computed file. Do not edit.\n    Instead, edit `/readme.template.md` and run `npm run docs` (or `yarn docs`).\n\n\n\n\n\n\n\n\n\n\n\n\n    WARNING, READ THIS.\n    This is a computed file. Do not edit.\n    Instead, edit `/readme.template.md` and run `npm run docs` (or `yarn docs`).\n\n\n\n\n\n\n\n\n\n\n\n\n    WARNING, READ THIS.\n    This is a computed file. Do not edit.\n    Instead, edit `/readme.template.md` and run `npm run docs` (or `yarn docs`).\n\n\n\n\n\n\n--\u003e\n# Awesome Universal Rendering [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re)\n\nAwesome resources about universal rendering:\n- **Introduction**\n  \u003cbr/\u003e\n  Explains why universal rendering is beneficial,\n  the different techniques of doing universal rendering (SSR, SSG, pre-rendering)\n  and when to use what technique.\n- **Learning Material**\n  - SEO benefits of universal rendering\n  - Performance benefits of SSR\n  - How to implement SSR\n- **Tools**\n  - SSR frameworks \u0026 libraries\n  - Pre-rendering services \u0026 tools\n  - Static site generators\n\n\u003cbr/\u003e\n\n#### Contents\n\n- [Introduction](#introduction)\n- [Learning Material](#learning-material)\n- [Tools](#tools)\n\n\u003cbr/\u003e\n\n## Introduction\n\nModern view libraries (React, Vue, Angular, etc.) render views to the DOM in the browser but they can as well render views to HTML on the server.\nThis capability can be used to render the same view twice:\nFirst to HTML then again to the DOM. (Re-rendering the view in the browser is called *hydrating*.)\nThis practice is called *universal rendering* (aka isomorphic rendering).\n\nUniversal rendering leads to improvements in SEO, SMO and performance.\n\nThere are several techniques to achieve universal rendering:\n\n - Server-Side Rendering (SSR)\n - Static Site Generators (SSG)\n - Pre-Rendering\n\nIn the following we explain these techniques and the benefits of universal rendering.\n\n- [Benefits](#benefits)\n- [Techniques](#techniques)\n\n### Benefits\n\n#### SEO\n\nModern frontends (React, Vue, Angular, ...) use JavaScript to load and display content.\nSuch JavaScript-generated-content is invisible to crawlers that don't execute JavaScript.\nMost crawlers (search engines and social sites) don't execute JavaScript.\n\nThe Google crawler is\nthe only one that can successfully index JavaScript-generated-content.\nBut it has limitations.\n(Mainly around delayed indexing and client-side routing,\nsee [Learning Material](#learning-material).)\n\nIf you want your content to be crawled by all other search engines (Bing, Baidu, DuckDuckGo, etc.), then your content needs to be included in your website's HTML.\n\n#### SMO\n\nThe crawler of social media sites (Facebook, Twitter, ...) don't execute JavaScript and rely on HTML exclusively.\n\nIf you want your website to be correctly previewed when a user shares your website, then the corresponding information needs to be included in your website's HTML.\n\n(SMO means \"Social Media Optimization\".)\n\n#### Performance\n\nRendering your website's pages to HTML decreases the perceived loading time:\nOnce the HTML is loaded, content can already be displayed before any JavaScript is loaded/executed.\n\nThe improvement is considerable on mobile\nwhere loading and executing JavaScript is much slower.\n\n### Techniques\n\nServer-Side Rendering (SSR), Pre-Rendering, and Static Site Generators (SSG) are techniques to render JavaScript-generated-content to HTML.\nMaking the content visible to crawlers and improving performance.\n\nThere are two ways to render JavaScript-generated-content to HTML:\n\n- **Directly render to HTML**\n  \u003cbr/\u003e\n  Modern view libraries (React, Vue, Angular, ...) can render views to HTML (in addition to be able to render views to the DOM).\n  (E.g. a React component can be rendered to HTML with `require('react-dom/server').renderToStaticMarkup()`.)\n- **Render to HTML via headless browser**\n  \u003cbr/\u003e\n  A headless browser runs your website's JavaScript,\n  the website's pages are rendered to the DOM of the headless browser,\n  and HTML is automatically generated from the resulting DOM.\n\nLeading to the following techniques:\n\n- **Server-Side Rendering (SSR)**\n  \u003cbr/\u003e\n  Directly render your website's pages to HTML at request-time:\n  Every time a user requests a page, the server renders the page directly to HTML.\n  \u003cbr/\u003e\n  SSR is the most reliable option if your HTML changes frequently.\n  (If your website's content may change after deploy-time,\n  e.g. if you website's content is generated by users.)\n- **Pre-Rendering**\n  \u003cbr/\u003e\n  A headless browser crawls your website, executes the website's JavaScript, and generates HTML upon the resulting DOM.\n- **Static Site Generators (SSG)**\n  \u003cbr/\u003e\n  A static site is a website that doesn't have any server code:\n  The website is composed of static browser assets only (HTML, CSS, JavaScript, images, fonts, etc.).\n  Some SSG are able to render your views to HTML at build-time:\n  When your website is built, each page is rendered to a HTML file that includes your page's content.\n  \u003cbr/\u003e\n  If your content only changes at deploy-time, then using a SSG is an option.\n\n\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## Learning Material\n\n### SEO/SMO\n\n - [Hacker News Comment](https://news.ycombinator.com/item?id=12759605) - This HN comment explains the problem with SEO and search engines other than Google.\n - [Tweet from Google employee](https://twitter.com/Paul_Kinlan/status/1039852756113080320) - Tweet about delayed Google indexing for pure client-side.\n - [What's Server Side Rendering and do I need it?](https://medium.com/@baphemot/whats-server-side-rendering-and-do-i-need-it-cb42dc059b38) - Good summary about the issues of JavaScript-generated-content.\n - [Deliver search-friendly JavaScript-powered websites (Google I/O '18)](https://www.youtube.com/watch?v=PFwUbgvpdaQ) - Talk that mentions how the Google crawler executes JavaScript. Main take away: Google does index JavaScript-generated-content but with a delay.\n\n### How to implement SSR\n\n - [The Complete Guide for SSR with Vue](https://ssr.vuejs.org/) - Official guide.\n - [Reactjs SSR Tips and Tricks](https://medium.com/@atahani/reactjs-ssr-tips-and-tricks-be9edff5b7bb)\n - [Server-side rendering with create-react-app, code-splitting, preloaded data, React Router, Helmet, Redux, and Thunk](https://medium.com/@cereallarceny/server-side-rendering-in-create-react-app-with-all-the-goodies-without-ejecting-4c889d7db25e) - Walkthrough of implementing a SSR app based on CRA (without having ejected).\n\n### General discussion\n\n - [The Benefits of Server Side Rendering Over Client Side Rendering](https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8)\n\n\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## Tools\n\n#### Contents\n\n- [React](#react)\n  - [SSR](#ssr)\n  - [SSG](#ssg)\n  - [Pre-Rendering](#pre-rendering)\n- [Vue](#vue)\n  - [SSR](#ssr-1)\n  - [SSG](#ssg-1)\n  - [Pre-Rendering](#pre-rendering-1)\n- [Angular](#angular)\n  - [SSR](#ssr-2)\n  - [Pre-Rendering](#pre-rendering-2)\n- [View Library Agnostic](#view-library-agnostic)\n  - [SSG](#ssg-2)\n  - [Pre-Rendering](#pre-rendering-3)\n\n\n\n\n\u003cbr/\u003e\n\n### React\n\n#### SSR\n\n##### Frameworks\n\n - [Next.js](https://github.com/zeit/next.js#readme) - The most popular SSR tool.\n - [After.js](https://github.com/jaredpalmer/after.js#readme) - Similar to Next.js but with routing based on React Router.\n - [React Server](https://github.com/redfin/react-server#readme)\n - [Reframe](https://github.com/reframejs/reframe#readme) - Flexible web framework. It does SSR by default and can be used as SSG.\n - [Fusion.js](https://github.com/fusionjs) - Plugin-based universal web framework maintained by Uber.\n\n##### Libraries\n\n - [Goldpage](https://github.com/reframejs/goldpage) - A do-one-thing-do-it-well library that supports all app types; \"SPA\", \"SSR\", \"Static Website\", etc.\n - [Razzle](https://github.com/jaredpalmer/razzle#readme) - Handles the building. You do the rest.\n - [React Universal Component](https://github.com/faceyspacey/react-universal-component#readme) - Utility to code split your SSR app.\n - [Rogue.js](https://github.com/alidcastano/rogue.js#readme) - SSR utilities focused on flexibility. First-class support for React Router, Apollo GraphQL, Redux, Emotion, and Styled-Components. The build step is up to you (but you can use Razzle.)\n\n##### Boilerplates\n\n - [cra-ssr](https://github.com/cereallarceny/cra-ssr#readme) - SSR app boilerplate based on CRA (without having ejected).\n\n#### SSG\n\n - [Gatsby.js](https://github.com/gatsbyjs/gatsby#readme) - SSG based on React and GraphQL.\n - [React Static](https://github.com/nozzle/react-static#readme) - SSG based on React and focused on simplicity.\n - [Goldpage](https://github.com/reframejs/goldpage) - A do-one-thing-do-it-well library that supports all app types; \"SPA\", \"SSR\", \"Static Website\", etc.\n - [Phenomic](https://github.com/phenomic/phenomic#readme) - SSG based on a flexible plugin system.\n - [Next.js](https://github.com/zeit/next.js#readme) - Although primarily focused on SSR, Next.js can also generate static sites.\n - [Reframe](https://github.com/reframejs/reframe#readme) - Flexible web framework. It does SSR by default and can be used as SSG.\n\n#### Pre-Rendering\n\n#### Dynamic Pre-Rendering\n\nAutomatically and regularly render your deployed website to HTML.\n\n##### SaaS\n\n - [Prerender.io](https://prerender.io/)\n - [SEO4Ajax](https://www.seo4ajax.com/)\n - [Prerender.cloud](https://www.prerender.cloud/)\n - [SEO.js](http://getseojs.com/)\n - [BromBone](https://www.brombone.com/)\n\n##### Libraries\n\n - [Prerender.io Node Server](https://github.com/prerender/prerender#readme) - The prerender.io Node Server is open source.\n\n#### Static Pre-Rendering\n\n*Some static pre-renderers, instead of generating HTML upon a generated DOM, directly render your pages to HTML.*\n\n - [Prerender SPA Plugin](https://github.com/chrisvfritz/prerender-spa-plugin#readme) - Uses Puppeteer to crawl \u0026 render your pages.\n - [react-snap](https://github.com/stereobooster/react-snap#readme) - Uses Puppeteer to crawl \u0026 render your pages.\n - [prep](https://github.com/prismagraphql/prep#readme) - Uses Chromeless to crawl \u0026 render your pages.\n - [SSG webpack plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin#readme) - Directly render your pages to HTML. You provide render functions and routes. All routes are rendered at build-time using the render functions you provided. Also has a crawl mode to use a headless browser to automatically discover your website's URLs.\n - [React Snapshot](https://github.com/geelen/react-snapshot#readme) - Pre-renders React apps at build-time. Uses `require('react-dom/server').renderToString` to directly render the HTML. Uses JSDOM as headless browser to automatically discover your app's URLs.\n\n\n\n\n\n\u003cbr/\u003e\n\n### Vue\n\n#### SSR\n\n##### Frameworks\n\n - [Nuxt](https://github.com/nuxt/nuxt.js#readme) - Similar to Next.js but for Vue.\n - [Reframe](https://github.com/reframejs/reframe#readme) - Flexible web framework. It does SSR by default and can be used as SSG.\n\n##### Libraries\n\n - [vue-server-renderer](https://www.npmjs.com/package/vue-server-renderer) - Official library for SSR with Vue.\n - [Goldpage](https://github.com/reframejs/goldpage) - A do-one-thing-do-it-well library that supports all app types; \"SPA\", \"SSR\", \"Static Website\", etc.\n\n#### SSG\n\n - [Phenomic](https://github.com/phenomic/phenomic#readme) - SSG based on a flexible plugin system.\n - [Reframe](https://github.com/reframejs/reframe#readme) - Flexible web framework. It does SSR by default and can be used as SSG.\n\n#### Pre-Rendering\n\n#### Dynamic Pre-Rendering\n\nAutomatically and regularly render your deployed website to HTML.\n\n##### SaaS\n\n - [Prerender.io](https://prerender.io/)\n - [SEO4Ajax](https://www.seo4ajax.com/)\n - [Prerender.cloud](https://www.prerender.cloud/)\n - [SEO.js](http://getseojs.com/)\n - [BromBone](https://www.brombone.com/)\n\n##### Libraries\n\n - [Prerender.io Node Server](https://github.com/prerender/prerender#readme) - The prerender.io Node Server is open source.\n\n#### Static Pre-Rendering\n\n*Some static pre-renderers, instead of generating HTML upon a generated DOM, directly render your pages to HTML.*\n\n - [Prerender SPA Plugin](https://github.com/chrisvfritz/prerender-spa-plugin#readme) - Uses Puppeteer to crawl \u0026 render your pages.\n - [react-snap](https://github.com/stereobooster/react-snap#readme) - Uses Puppeteer to crawl \u0026 render your pages.\n - [prep](https://github.com/prismagraphql/prep#readme) - Uses Chromeless to crawl \u0026 render your pages.\n - [SSG webpack plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin#readme) - Directly render your pages to HTML. You provide render functions and routes. All routes are rendered at build-time using the render functions you provided. Also has a crawl mode to use a headless browser to automatically discover your website's URLs.\n\n\n\n\n\n\n\u003cbr/\u003e\n\n### Angular\n\n#### SSR\n\n - [Angular Universal](https://github.com/angular/universal#readme) - Official packages for SSR with Angular.\n\n#### Pre-Rendering\n\n#### Dynamic Pre-Rendering\n\nAutomatically and regularly render your deployed website to HTML.\n\n##### SaaS\n\n - [Prerender.io](https://prerender.io/)\n - [SEO4Ajax](https://www.seo4ajax.com/)\n - [Prerender.cloud](https://www.prerender.cloud/)\n - [SEO.js](http://getseojs.com/)\n - [BromBone](https://www.brombone.com/)\n\n##### Libraries\n\n - [Prerender.io Node Server](https://github.com/prerender/prerender#readme) - The prerender.io Node Server is open source.\n\n#### Static Pre-Rendering\n\n*Some static pre-renderers, instead of generating HTML upon a generated DOM, directly render your pages to HTML.*\n\n - [Prerender SPA Plugin](https://github.com/chrisvfritz/prerender-spa-plugin#readme) - Uses Puppeteer to crawl \u0026 render your pages.\n - [react-snap](https://github.com/stereobooster/react-snap#readme) - Uses Puppeteer to crawl \u0026 render your pages.\n - [prep](https://github.com/prismagraphql/prep#readme) - Uses Chromeless to crawl \u0026 render your pages.\n - [SSG webpack plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin#readme) - Directly render your pages to HTML. You provide render functions and routes. All routes are rendered at build-time using the render functions you provided. Also has a crawl mode to use a headless browser to automatically discover your website's URLs.\n\n\n\n\n\u003cbr/\u003e\n\n### View Library Agnostic\n\n#### SSG\n\n - [Phenomic](https://github.com/phenomic/phenomic#readme) - SSG based on a flexible plugin system.\n - [Reframe](https://github.com/reframejs/reframe#readme) - Flexible web framework. It does SSR by default and can be used as SSG.\n\n#### Pre-Rendering\n\n#### Dynamic Pre-Rendering\n\nAutomatically and regularly render your deployed website to HTML.\n\n##### SaaS\n\n - [Prerender.io](https://prerender.io/)\n - [SEO4Ajax](https://www.seo4ajax.com/)\n - [Prerender.cloud](https://www.prerender.cloud/)\n - [SEO.js](http://getseojs.com/)\n - [BromBone](https://www.brombone.com/)\n\n##### Libraries\n\n - [Prerender.io Node Server](https://github.com/prerender/prerender#readme) - The prerender.io Node Server is open source.\n\n#### Static Pre-Rendering\n\n*Some static pre-renderers, instead of generating HTML upon a generated DOM, directly render your pages to HTML.*\n\n - [Prerender SPA Plugin](https://github.com/chrisvfritz/prerender-spa-plugin#readme) - Uses Puppeteer to crawl \u0026 render your pages.\n - [react-snap](https://github.com/stereobooster/react-snap#readme) - Uses Puppeteer to crawl \u0026 render your pages.\n - [prep](https://github.com/prismagraphql/prep#readme) - Uses Chromeless to crawl \u0026 render your pages.\n - [SSG webpack plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin#readme) - Directly render your pages to HTML. You provide render functions and routes. All routes are rendered at build-time using the render functions you provided. Also has a crawl mode to use a headless browser to automatically discover your website's URLs.\n\n\n\u003c!---\n\n\n\n\n\n\n    WARNING, READ THIS.\n    This is a computed file. Do not edit.\n    Instead, edit `/readme.template.md` and run `npm run docs` (or `yarn docs`).\n\n\n\n\n\n\n\n\n\n\n\n\n    WARNING, READ THIS.\n    This is a computed file. Do not edit.\n    Instead, edit `/readme.template.md` and run `npm run docs` (or `yarn docs`).\n\n\n\n\n\n\n\n\n\n\n\n\n    WARNING, READ THIS.\n    This is a computed file. Do not edit.\n    Instead, edit `/readme.template.md` and run `npm run docs` (or `yarn docs`).\n\n\n\n\n\n\n\n\n\n\n\n\n    WARNING, READ THIS.\n    This is a computed file. Do not edit.\n    Instead, edit `/readme.template.md` and run `npm run docs` (or `yarn docs`).\n\n\n\n\n\n\n\n\n\n\n\n\n    WARNING, READ THIS.\n    This is a computed file. Do not edit.\n    Instead, edit `/readme.template.md` and run `npm run docs` (or `yarn docs`).\n\n\n\n\n\n\n--\u003e\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/brillout%2Fawesome-universal-rendering/projects"}