- Add 404 Page
- Adding Images, Fonts, and Files
- Browser Support
- Creating and Modifying Pages
- Create a source plugin
- Custom webpack config
- Customizing html.js
- Debugging HTML Builds
- Environment Variables
- Gatsby on Windows
- Managing Content with Netlify CMS
- How Gatsby Works with GitHub Pages
- Migrating from v0 to v1
- Path Prefix
- Proxying API Requests
- Using CSS-in-JS library Glamor
- Using CSS-in-JS library Styled Components
- Adding Markdown Pages
- Adding a List of Markdown Blog Posts
- Adding Tags and Categories to Blog Posts
- Creating Dynamically-Rendered Navigation
- Dropping Images into Static Folders
- Part One
- Part Two
- Part Three
- Part Four
- Recap of first half of the tutorial
- Data in Gatsby
- How Gatsby’s data layer uses GraphQL to pull data into components
- Our first GraphQL query
- Introducing GraphiQL
- Source Plugins
- Build a page with a GraphQL query
- Transformer Plugins
- Create a list of our site’s markdown files in src/pages/index.js
- Programmatically creating pages from data
PRPL is a web site architecture developed by Google for building websites and apps that work exceptionally well on smartphones and other devices with unreliable network connections.
PRPL stands for:
- 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.
Note http/2 push is a developing server technology and not available on most hosts just yet.
Gatsby follows the PRPL architectural pattern. Gatsby sites render a static HTML version of the initial route and then load the code bundle for the page. Then immediately starts pre-caching resources for pages linked to from the initial route. When a user clicks on a link, Gatsby creates the new page on demand on the client.
This issue written at the start of Gatsby’s 1.0 work provides further background on how Gatsby works to guarantee high performance.
This blog post also covers how we think about performance — “Web Performance 101—also, why is Gatsby so fast?”