HOW
Gatsby v2
Works
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 ⛸️
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!
