brillout/awesome-universal-rendering brillout/awesome-universal-rendering

  • Stars
    star
    339
  • Rank 124,632 (Top 3 %)
  • Language
  • License
    Creative Commons ...
  • Created over 6 years ago
  • Updated almost 2 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
brillout/awesome-universal-rendering
github

brillout

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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.

More Repositories

1

awesome-react-components

Curated List of React Components & Libraries.
37,355
star
2

awesome-angular-components

Catalog of Angular 2+ Components & Libraries
3,236
star
3

telefunc

Remote Functions. Instead of API.
TypeScript
649
star
4

awesome-redux

Catalog of Redux Libraries & Learning Material
374
star
5

wildcard-api

Functions as API.
JavaScript
367
star
6

vite-plugin-mdx

Vite Plugin for MDX
TypeScript
112
star
7

react-streaming

React 18 Streaming. Full-fledged & Easy.
TypeScript
106
star
8

goldpage

Page Builder.
JavaScript
57
star
9

awesome-web-apps

Curated List of Web Apps
56
star
10

timer-tab

Source code of Timer Tab
JavaScript
48
star
11

forge-sha256

SHA-256 implementation extracted from digitalbazaar/forge
JavaScript
44
star
12

clocktab

Source code of Clock Tab.
JavaScript
34
star
13

gulp-jspm

gulp plugin to build assets loaded with jspm/SystemJS
JavaScript
34
star
14

awesome-frontend-libraries

Catalog of Frontend UI Libraires
34
star
15

awesome-vue-refactor

A curated list of awesome things related to Vue.js
33
star
16

vike

Build Your Own Framework.
TypeScript
31
star
17

json-serializer

Same as JSON but with added support for Date, undefined, NaN, Infinity, RegExp and more.
JavaScript
25
star
18

parcel-ssr

SSR tool. Tiny yet powerful. Based on Parcel.
JavaScript
15
star
19

extendable-error-class

Extend the Error Class with ES2015/ES5/Babel, i.e. fix for `class MyError extends Error{}`
JavaScript
14
star
20

test-javascript-hash-implementations

Javascript hash implementations tested for speed. Including SHA-256, MD5, CRC32, SHA3, BLAKE2S
JavaScript
12
star
21

proto-db

JavaScript Object as Database.
JavaScript
11
star
22

vite-plugin-server-entry

Handles the server entry.
TypeScript
8
star
23

promise-serial

Run promises in series
JavaScript
8
star
24

vike-with-vercel

JavaScript
8
star
25

docpress

TypeScript
8
star
26

vite-plugin-ssr_windi-css

Example of using vite-plugin-ssr with Windi CSS
JavaScript
7
star
27

build-worker

Build your Cloudflare Workers with esbuild.
JavaScript
7
star
28

vite-to-vike

Add SSR/SSG to an existing Vite app.
JavaScript
7
star
29

reprop

A JavaScript library to manage the logics of views
JavaScript
6
star
30

vps-deno

Example of using vite-plugin-ssr with Deno
JavaScript
6
star
31

vite-plugin-ssr_tailwind-css

JavaScript
6
star
32

html

Generate HTML documents.
JavaScript
6
star
33

FasterWeb

Proposal to reduce loading time of library code on the web
5
star
34

libraries

Curated list of library lists
5
star
35

research

5
star
36

fetch

WHATWG Fetch for the browser and Node.js
JavaScript
5
star
37

esm-cjs-interop-playground

JavaScript
4
star
38

vite-plugin-ssr_react-europe_talk

vite-plugin-ssr talk
JavaScript
4
star
39

timerlog

A small utility to measure and log time
JavaScript
4
star
40

stem

TypeScript
4
star
41

vite-plugin-ssr_vercel_build-output-api

JavaScript
4
star
42

vike-with-svelte

JavaScript
4
star
43

import

TypeScript
3
star
44

vite-plugin-ssr-vuetify

JavaScript
3
star
45

url-props

Fully-featured URL parsing, for Node.js & Browser.
JavaScript
3
star
46

vike-react-router

JavaScript
3
star
47

vps_prerender-worker

JavaScript
3
star
48

vike-with-solid-ssr

TypeScript
3
star
49

stem-react

React renderer for vite-plugin-ssr
TypeScript
3
star
50

part-regex

Create a RegExp by defining some parts with strings and other parts with RegExp.
TypeScript
3
star
51

website-dependency-tree

Retrieve the Dependency Tree of a Website
JavaScript
3
star
52

vite-framework

Example of a framework built on top of Vite + vite-plugin-ssr
TypeScript
3
star
53

vike-with-redux

JavaScript
3
star
54

test-e2e

TypeScript
2
star
55

cloudflare-workers-react-18-streaming

Example of using React 18 SSR Streaming on Cloudflare Workers
JavaScript
2
star
56

vike-with-redux_minimal-example

JavaScript
2
star
57

eject

TypeScript
2
star
58

vite-plugin-ssr_vue-router

JavaScript
2
star
59

goldpage-react-express-starter

πŸš€ Starter to create a full-stack app: Interactive Frontend (React) + SSR (Goldpage) + Server (Node.js, Express).
JavaScript
2
star
60

vite-3-react-18-ssr-streaming

JavaScript
2
star
61

libframe

TypeScript
2
star
62

libassert

Tiny zero-dependency tool for library authors to create assertion functions with clean strack traces.
TypeScript
2
star
63

wildcard-intercept

Library to intercept Wildcard API calls.
JavaScript
2
star
64

tab-utils

Utilities for Clock Tab and Timer Tab
TypeScript
2
star
65

set-text-dimensions

set block of text dimension to a given width and height
JavaScript
2
star
66

vps-mui

TypeScript
2
star
67

vike-preact-server-routing

JavaScript
2
star
68

vike-with-solid-spa

TypeScript
2
star
69

find

Find a file among your project files.
JavaScript
2
star
70

get-parent-dirname

Get the path of the directory of the parent module.
JavaScript
2
star
71

clean-sentence

Clean a sentence from missing first letter upper case, trailing dot and/or remove URLs, emojis, white space doublets.
JavaScript
2
star
72

vite-config-json

TypeScript
2
star
73

free-emailing

Free emailing including custom domain and programmatic API
2
star
74

mdocs

Utility to create documentation for programming libraries with markdown.
JavaScript
2
star
75

vite-plugin-ssr_vercel-2022-02

JavaScript
2
star
76

trace-logs

Trace console.logS in Node.js to know from which file they come from
JavaScript
2
star
77

npm-download-count

Retrieve package's number of downloads in a period of time
JavaScript
2
star
78

vps-framework

JavaScript
2
star
79

nuxt-telefunc

TypeScript
1
star
80

pnpm-vue-demo

1
star
81

restack

TypeScript
1
star
82

require-shim

JavaScript
1
star
83

mini-assert

a mini(malistic) assertion library for both the Browser and Node.js
JavaScript
1
star
84

get-user-dir

For libraries to get the directory of the user's code
JavaScript
1
star
85

framework-builder

TypeScript
1
star
86

telefunc-vercel

JavaScript
1
star
87

submodule-init

TypeScript
1
star
88

vite-webpack

TypeScript
1
star
89

vite-pr-12030-reprod

CSS
1
star
90

release-me

Publish your npm packages.
TypeScript
1
star
91

vps-mdi

TypeScript
1
star
92

jspm-plugin-audio

JSPM Audio Plugin
JavaScript
1
star
93

vite-swc

JavaScript
1
star
94

vike-with-urql

TypeScript
1
star
95

vike-react-simple

JavaScript
1
star
96

github-action-matrix-with-js

JavaScript
1
star
97

vps-babel-bug

JavaScript
1
star
98

vps_import.meta.hot

JavaScript
1
star
99

vps-reprod-308

TypeScript
1
star
100

node-mini-log

mini(malistic) logs
JavaScript
1
star