readme.template.md

Awesome Universal Rendering

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
• Learning Material
• Tools

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
• Techniques

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

• Hacker News Comment - This HN comment explains the problem with SEO and search engines other than Google.
• Tweet from Google employee - Tweet about delayed Google indexing for pure client-side.
• What's Server Side Rendering and do I need it? - Good summary about the issues of JavaScript-generated-content.
• Deliver search-friendly JavaScript-powered websites (Google I/O '18) - Talk that mentions how the Google crawler executes JavaScript. Main take away: Google does index JavaScript-generated-content but with a delay.

How to implement SSR

• The Complete Guide for SSR with Vue - Official guide.
• Reactjs SSR Tips and Tricks
• Server-side rendering with create-react-app, code-splitting, preloaded data, React Router, Helmet, Redux, and Thunk - Walkthrough of implementing a SSR app based on CRA (without having ejected).

General discussion

• The Benefits of Server Side Rendering Over Client Side Rendering

Tools

Contents

• React
  • SSR
  • SSG
  • Pre-Rendering
• Vue
  • SSR
  • SSG
  • Pre-Rendering
• Angular
  • SSR
  • Pre-Rendering
• View Library Agnostic
  • SSG
  • Pre-Rendering

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 !INLINE ./reframe.md --hide-source-path
• 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. !INLINE ./reframe.md --hide-source-path

Pre-Rendering

!INLINE ./prerender-dynamic.md --hide-source-path

!INLINE ./prerender-static.md --hide-source-path

• 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. !INLINE ./reframe.md --hide-source-path

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. !INLINE ./reframe.md --hide-source-path

Pre-Rendering

!INLINE ./prerender-dynamic.md --hide-source-path

!INLINE ./prerender-static.md --hide-source-path

Angular

SSR

• Angular Universal - Official packages for SSR with Angular.

Pre-Rendering

!INLINE ./prerender-dynamic.md --hide-source-path

!INLINE ./prerender-static.md --hide-source-path

View Library Agnostic

SSG

• Phenomic - SSG based on a flexible plugin system. !INLINE ./reframe.md --hide-source-path

Pre-Rendering

!INLINE ./prerender-dynamic.md --hide-source-path

!INLINE ./prerender-static.md --hide-source-path