GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → brillout → Awesome Universal Rendering

brillout / Awesome Universal Rendering

Licence: cc0-1.0
Awesome resources about server side sendering (SSR), static rendering, pre-rendering, static site generators (SSG).

Labels

awesomeawesome-listssrserver-side-renderingserver-rendering

Projects that are alternatives of or similar to Awesome Universal Rendering

Angular Ssr
Angular 4+ server-side rendering solution compatible with @angular/material, jQuery, and other libraries that touch the DOM (as well as providing a rich feature set!)
Stars: ✭ 283 (-8.12%)
Mutual labels:  server-rendering, ssr, server-side-rendering
vue-ssr-starter
Starter kit for projects with Webpack 4, Vue 2 and SSR
Stars: ✭ 53 (-82.79%)
Mutual labels:  ssr, server-side-rendering
SSR-React-Using-Serverless
SSR-React Using Serverless(aws)
Stars: ✭ 34 (-88.96%)
Mutual labels:  ssr, server-side-rendering
React Loadable
⏳ A higher order component for loading components with promises.
Stars: ✭ 16,238 (+5172.08%)
Mutual labels:  ssr, server-side-rendering
ssr-starter-pack
Moved to https://github.com/Brigad/ssr-starter-pack
Stars: ✭ 12 (-96.1%)
Mutual labels:  ssr, server-side-rendering
angular-pwa
Angular 13 Example Progressive Web App (PWA)
Stars: ✭ 45 (-85.39%)
Mutual labels:  ssr, server-side-rendering
jooger.me
👍 My personal website，powered by @nuxt
Stars: ✭ 39 (-87.34%)
Mutual labels:  ssr, server-side-rendering
react-coat-ssr-demo
Demo with Typescript + React + Redux for server-side-rendering (SSR)
Stars: ✭ 100 (-67.53%)
Mutual labels:  ssr, server-side-rendering
movies
Real world isomorphic application for movies search, based on Webpack 5 / Express / React 17 + Redux-Saga / Bootstrap 4.6 + CSS Modules / i18next / SSR
Stars: ✭ 20 (-93.51%)
Mutual labels:  ssr, server-side-rendering
React Head
⛑ SSR-ready Document Head tag management for React 16+
Stars: ✭ 262 (-14.94%)
Mutual labels:  ssr, server-side-rendering
React Storefront
Build and deploy e-commerce progressive web apps (PWAs) in record time.
Stars: ✭ 275 (-10.71%)
Mutual labels:  ssr, server-side-rendering
Ssr Sample
A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App
Stars: ✭ 285 (-7.47%)
Mutual labels:  ssr, server-side-rendering
webpack-isomorphic-compiler
A compiler that makes your life easier if you are building isomorphic webpack powered apps, that is, single page applications with server-side rendering
Stars: ✭ 16 (-94.81%)
Mutual labels:  ssr, server-side-rendering
server-authentication-next.js
No description or website provided.
Stars: ✭ 103 (-66.56%)
Mutual labels:  server-side-rendering, server-rendering
elegant-react-ssr
Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk boilerplate, without ejecting CRA
Stars: ✭ 16 (-94.81%)
Mutual labels:  ssr, server-side-rendering
nx-ng-nest-universal
Nx Workspace with a seperated Nest App for Angular Universal SSR.
Stars: ✭ 32 (-89.61%)
Mutual labels:  ssr, server-side-rendering
isomorphic-react-redux-saga-ssr
Isomorphic, React, Redux, Saga, Server Side rendering, Hot Module Reloading, Ducks, Code Splitting
Stars: ✭ 19 (-93.83%)
Mutual labels:  ssr, server-side-rendering
Modern-Web-App
React PWA with SSR and Code splitting
Stars: ✭ 45 (-85.39%)
Mutual labels:  ssr, server-side-rendering
egg-view-vue-ssr
Egg Vue Server Side Render (SSR) Plugin
Stars: ✭ 90 (-70.78%)
Mutual labels:  ssr, server-side-rendering
React Storefront
React Storefront - PWA for eCommerce. 100% offline, platform agnostic, headless, Magento 2 supported. Always Open Source, Apache-2.0 license. Join us as contributor ([email protected]).
Stars: ✭ 292 (-5.19%)
Mutual labels:  ssr, server-side-rendering
View All Similar Projects ➔

Awesome Universal Rendering Awesome

Awesome resources about universal rendering:

  • Introduction
    Explains why universal rendering is beneficial, the different techniques of doing universal rendering (SSR, SSG, pre-rendering) and when to use what technique.
  • Learning Material
    • SEO benefits of universal rendering
    • Performance benefits of SSR
    • How to implement SSR
  • Tools
    • SSR frameworks & libraries
    • Pre-rendering services & tools
    • Static site generators

Contents


Introduction

Modern 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. This capability can be used to render the same view twice: First to HTML then again to the DOM. (Re-rendering the view in the browser is called hydrating.) This practice is called universal rendering (aka isomorphic rendering).

Universal rendering leads to improvements in SEO, SMO and performance.

There are several techniques to achieve universal rendering:

  • Server-Side Rendering (SSR)
  • Static Site Generators (SSG)
  • Pre-Rendering

In the following we explain these techniques and the benefits of universal rendering.

Benefits

SEO

Modern frontends (React, Vue, Angular, ...) use JavaScript to load and display content. Such JavaScript-generated-content is invisible to crawlers that don't execute JavaScript. Most crawlers (search engines and social sites) don't execute JavaScript.

The Google crawler is the only one that can successfully index JavaScript-generated-content. But it has limitations. (Mainly around delayed indexing and client-side routing, see Learning Material.)

If 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.

SMO

The crawler of social media sites (Facebook, Twitter, ...) don't execute JavaScript and rely on HTML exclusively.

If 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.

(SMO means "Social Media Optimization".)

Performance

Rendering your website's pages to HTML decreases the perceived loading time: Once the HTML is loaded, content can already be displayed before any JavaScript is loaded/executed.

The improvement is considerable on mobile where loading and executing JavaScript is much slower.

Techniques

Server-Side Rendering (SSR), Pre-Rendering, and Static Site Generators (SSG) are techniques to render JavaScript-generated-content to HTML. Making the content visible to crawlers and improving performance.

There are two ways to render JavaScript-generated-content to HTML:

  • Directly render to HTML
    Modern view libraries (React, Vue, Angular, ...) can render views to HTML (in addition to be able to render views to the DOM). (E.g. a React component can be rendered to HTML with require('react-dom/server').renderToStaticMarkup().)
  • Render to HTML via headless browser
    A headless browser runs your website's JavaScript, the website's pages are rendered to the DOM of the headless browser, and HTML is automatically generated from the resulting DOM.

Leading to the following techniques:

  • Server-Side Rendering (SSR)
    Directly render your website's pages to HTML at request-time: Every time a user requests a page, the server renders the page directly to HTML.
    SSR is the most reliable option if your HTML changes frequently. (If your website's content may change after deploy-time, e.g. if you website's content is generated by users.)
  • Pre-Rendering
    A headless browser crawls your website, executes the website's JavaScript, and generates HTML upon the resulting DOM.
  • Static Site Generators (SSG)
    A static site is a website that doesn't have any server code: The website is composed of static browser assets only (HTML, CSS, JavaScript, images, fonts, etc.). Some SSG are able to render your views to HTML at build-time: When your website is built, each page is rendered to a HTML file that includes your page's content.
    If your content only changes at deploy-time, then using a SSG is an option.


Learning Material

SEO/SMO

How to implement SSR

General discussion



Tools

Contents


React

SSR

Frameworks
  • Next.js - The most popular SSR tool.
  • After.js - Similar to Next.js but with routing based on React Router.
  • React Server
  • Reframe - Flexible web framework. It does SSR by default and can be used as SSG.
  • Fusion.js - Plugin-based universal web framework maintained by Uber.
Libraries
  • Goldpage - A do-one-thing-do-it-well library that supports all app types; "SPA", "SSR", "Static Website", etc.
  • Razzle - Handles the building. You do the rest.
  • React Universal Component - Utility to code split your SSR app.
  • Rogue.js - 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.)
Boilerplates
  • cra-ssr - SSR app boilerplate based on CRA (without having ejected).

SSG

  • Gatsby.js - SSG based on React and GraphQL.
  • React Static - SSG based on React and focused on simplicity.
  • Goldpage - A do-one-thing-do-it-well library that supports all app types; "SPA", "SSR", "Static Website", etc.
  • Phenomic - SSG based on a flexible plugin system.
  • Next.js - Although primarily focused on SSR, Next.js can also generate static sites.
  • Reframe - Flexible web framework. It does SSR by default and can be used as SSG.

Pre-Rendering

Dynamic Pre-Rendering

Automatically and regularly render your deployed website to HTML.

SaaS
Libraries

Static Pre-Rendering

Some static pre-renderers, instead of generating HTML upon a generated DOM, directly render your pages to HTML.

  • Prerender SPA Plugin - Uses Puppeteer to crawl & render your pages.
  • react-snap - Uses Puppeteer to crawl & render your pages.
  • prep - Uses Chromeless to crawl & render your pages.
  • SSG webpack plugin - 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.
  • React Snapshot - 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.

Vue

SSR

Frameworks
  • Nuxt - Similar to Next.js but for Vue.
  • Reframe - Flexible web framework. It does SSR by default and can be used as SSG.
Libraries
  • vue-server-renderer - Official library for SSR with Vue.
  • Goldpage - A do-one-thing-do-it-well library that supports all app types; "SPA", "SSR", "Static Website", etc.

SSG

  • Phenomic - SSG based on a flexible plugin system.
  • Reframe - Flexible web framework. It does SSR by default and can be used as SSG.

Pre-Rendering

Dynamic Pre-Rendering

Automatically and regularly render your deployed website to HTML.

SaaS
Libraries

Static Pre-Rendering

Some static pre-renderers, instead of generating HTML upon a generated DOM, directly render your pages to HTML.

  • Prerender SPA Plugin - Uses Puppeteer to crawl & render your pages.
  • react-snap - Uses Puppeteer to crawl & render your pages.
  • prep - Uses Chromeless to crawl & render your pages.
  • SSG webpack plugin - 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.

Angular

SSR

Pre-Rendering

Dynamic Pre-Rendering

Automatically and regularly render your deployed website to HTML.

SaaS
Libraries

Static Pre-Rendering

Some static pre-renderers, instead of generating HTML upon a generated DOM, directly render your pages to HTML.

  • Prerender SPA Plugin - Uses Puppeteer to crawl & render your pages.
  • react-snap - Uses Puppeteer to crawl & render your pages.
  • prep - Uses Chromeless to crawl & render your pages.
  • SSG webpack plugin - 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.

View Library Agnostic

SSG

  • Phenomic - SSG based on a flexible plugin system.
  • Reframe - Flexible web framework. It does SSR by default and can be used as SSG.

Pre-Rendering

Dynamic Pre-Rendering

Automatically and regularly render your deployed website to HTML.

SaaS
Libraries

Static Pre-Rendering

Some static pre-renderers, instead of generating HTML upon a generated DOM, directly render your pages to HTML.

  • Prerender SPA Plugin - Uses Puppeteer to crawl & render your pages.
  • react-snap - Uses Puppeteer to crawl & render your pages.
  • prep - Uses Chromeless to crawl & render your pages.
  • SSG webpack plugin - 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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].