HOW
Gatsby v2
Works
 

@swyx                                                             

Infinite Builder

DX @ Netlify

JAMStackConf.com

/r/reactjs

71,000 React devs

LET's MAKE

A Next generation

static site generator

What do you need?

OLD SSG's:

generate HTML

App.js

/page

index.js

about.js

index.html

about.html

OLD SSG's:

generate HTML

based on data

App.js

/page

index.js

about.js

index.html

about.html

/content

1776-07-04-nothing-much-happened-today.md

1963-08-28-i-have-a-dream.md

blog.js

blog/1776-07-04-nothing-much-happened-today

blog/1963-08-28-i-have-a-dream

/template

OLD SSG's:

generate HTML

based on data

Why is this desirable?

  • Rarely updating content
  • No need to run server
  • No JS = SEO, Accessibility
  • CDN Caching = Fast
  • Separate content from presentation

REACT SSG's:

REhydrate SSR INTO CSR

single js bundle approach

App.js

/page

index.js

about.js

index.html

about.html

/content

1776-07-04-nothing-much-happened-today.md

1963-08-28-i-have-a-dream.md

blog.js

blog/1776-07-04-nothing-much-happened-today

blog/1963-08-28-i-have-a-dream

/template

bundle.js

REHYDRATION

REHYDRATION

// instead of

ReactDOM.render(element, container)

// you do this on the server

import ReactDOMServer from 'react-dom/server'

ReactDOMServer.renderToString(element)


// then this in the client

ReactDOM.hydrate(element, container)

What's the difference between a site and an APP?

What's the difference between a site and an APP?

None

 

How can you make this better?

App.js

/page

index.js

about.js

index.html

about.html

/content

1776-07-04-nothing-much-happened-today.md

1963-08-28-i-have-a-dream.md

blog.js

blog/1776-07-04-nothing-much-happened-today

blog/1963-08-28-i-have-a-dream

/template

bundle.js

 

Split up the JS

App.js

/page

index.js

about.js

index.html

about.html

/content

1776-07-04-nothing-much-happened-today.md

1963-08-28-i-have-a-dream.md

blog.js

blog/1776-07-04-nothing-much-happened-today

blog/1963-08-28-i-have-a-dream

/template

bundle.js

chunk1.js

chunk2.js

chunk3.js

chunk4.js

 

How can you make this better?

App.js

/page

index.js

about.js

index.html

about.html

/content

1776-07-04-nothing-much-happened-today.md

1963-08-28-i-have-a-dream.md

blog.js

blog/1776-07-04-nothing-much-happened-today

blog/1963-08-28-i-have-a-dream

/template

bundle.js

chunk1.js

chunk2.js

chunk3.js

chunk4.js

 

Split up the Data

App.js

/page

index.js

about.js

index.html

about.html

/content

1776-07-04-nothing-much-happened-today.md

1963-08-28-i-have-a-dream.md

blog.js

blog/1776-07-04-nothing-much-happened-today

blog/1963-08-28-i-have-a-dream

/template

bundle.js

chunk1.js

chunk2.js

data1.json

chunk3.js

data2.json

 

More best practices

  • inline CSS - avoid flash-of-unstyled-content
  • hot reloading
  • vendor chunk
  • caching and cache invalidation
  • multi stage data injection
  • service worker
  • data access from multiple sources
  • progressive image enhancement
  • custom fonts
  • preload next page
  • ???

 

PRPL Pattern

  • Push critical resources for the initial URL route using <link preload> and http/2.
  • Render initial route.
  • Pre-cache remaining routes.
  • Lazy-load and create remaining routes on demand.

 

https://developers.google.com/web/fundamentals/performance/prpl-pattern/

 

TOO MANY best practices

 

WE NEED A FRAMEWORK

Gatsby mental model

Gatsby mental model

App

Data

Gatsby

Plugins

Your Site

Gatsby docs

Gatsby V2

React 16

Webpack 4

Babel 7

@reach/router

Gatsby V2: StaticQUery

import React from "react"
import { StaticQuery, graphql } from "gatsby"

export default () => (
  <StaticQuery
    query={graphql`
      query HeadingQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <header>
        <h1>{data.site.siteMetadata.title}</h1>
      </header>
    )}
  />
)

Gatsby V2: Tracing

Client

Server

Client

Server

Clientside SPA

Server Side Rendering

⚒️

⚒️

😢

😃

⚒️

⚒️

CDN

Github

AOT Rendering = JAMStack

⚒️

Client

🤷‍♂️

😃

The age of AOT

  • React Fusion (React + Prepack)
  • React + Gatsby/React-Static
  • Angular Ivy
  • Vue + VuePress
  • Svelte + Sapper
  • (maybe) Babel-Macros like Babel-Blade ⛸️

Thank you!

 

Please send me feedback:

@swyx

 

Gatsby-v2-under-the-hood

By Shawn Swyx Wang

Gatsby-v2-under-the-hood

Functional-reactive libraries like RxJS make it easy to understand how data changes, giving us tools to declaratively handle events and manage state. But while our render methods react to state changes, React isn’t reactive. Instead, we write imperative event-handlers, and trip up on gotchas like async setState and race conditions. Why? In this talk we build a Reactive React to show the difference between the "push" and "pull" paradigms of data flow and understand why React chooses to manage Scheduling as a core Design Principle, enabling awesome features like async rendering and Suspense!

  • 1,635