HOW
Gatsby v2
Works
 

@swyx                                                             

Infinite Builder

DX @ Netlify

JAMStackConf.com

/r/reactjs

71,000 React devs

https://spectrum.chat/react

https://github.com/sw-yx/fresh-async-react

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)

REHYDRATION

in SSR fixture

 

https://github.com/facebook/react/tree/master/fixtures/ssr

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

https://www.youtube.com/watch?v=cX3CldSwWmc&feature=youtu.be&t=11m10s

Gatsby mental model

App

Data

Gatsby

Plugins

Your Site

Gatsby docs

Structure:

https://www.gatsbyjs.org/docs/gatsby-project-structure/

Lifecycle:

https://www.gatsbyjs.org/docs/gatsby-lifecycle-apis/

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

 

Made with Slides.com