Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gatsby, fast content based websites with React
Search
Cheesecake Labs
December 04, 2019
Programming
0
45
Gatsby, fast content based websites with React
Cheesecake Labs
December 04, 2019
Tweet
Share
More Decks by Cheesecake Labs
See All by Cheesecake Labs
Cats' wellness & care
cheesecakelabs
0
49
How do we create the first impressions?
cheesecakelabs
0
55
Menstrual cup: suit and freedom
cheesecakelabs
0
66
Life is a cycle, better with a bicycle
cheesecakelabs
0
51
Interview Process: how to get the best of people
cheesecakelabs
1
84
My capsule wardrobe experience
cheesecakelabs
3
60
Stonewall Rebellion and its impact on LGBTQIA+ history
cheesecakelabs
1
40
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
cheesecakelabs
0
48
MBTI - Psychological types described by Jung
cheesecakelabs
0
130
Other Decks in Programming
See All in Programming
EMこそClaude Codeでコード調査しよう
shibayu36
0
370
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
モテるデスク環境
mozumasu
3
1.2k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
360
SODA - FACT BOOK(JP)
sodainc
1
8.6k
CSC305 Lecture 08
javiergs
PRO
0
270
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.6k
Cursorハンズオン実践!
eltociear
2
1.2k
Google Opalで使える37のライブラリ
mickey_kubo
3
140
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Featured
See All Featured
Site-Speed That Sticks
csswizardry
13
920
Music & Morning Musume
bryan
46
6.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Become a Pro
speakerdeck
PRO
29
5.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Context Engineering - Making Every Token Count
addyosmani
8
300
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Embracing the Ebb and Flow
colly
88
4.9k
The Cult of Friendly URLs
andyhume
79
6.6k
Transcript
Gatsby Gatsby is a free and open source framework based
on React that helps developers build blazing fast websites and apps
Gatsby is a "static" website generator
None
None
1. Modern web tech without the headache 2. Speed past
the competition 3. Progressive Web App by default 4. Bring your own data https://www.gatsbyjs.org/
Content is the king (Data sources)
None
https://www.gatsbyjs.org/docs/how-plugins-apis-are-run/
Node runner Data sources Create node (reducer) Call onCreateNode Provide
data to query Build
How to query the data
None
None
None
Data can be queried inside pages, components, or the gatsby-node.js
file, using one of these options: 1. The pageQuery component 2. The StaticQuery component 3. The useStaticQuery hook
None
Performance Optimization Performance is hard. Let’s make Gatsby do the
work.
https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast/#reach-skip-nav
Image performance Ohhh myyyyy
https://using-gatsby-image.gatsbyjs.org/ The problem: Large, unoptimized images dramatically slow down your
site.
None
Everything is a plugin 1480 plugins today
None
None
Nothing is perfect Pages (solves with a plugin), variables inside
query), cache and build time problems on deploy (netlify)
Why we should use at CKL?
Real world projects
Questions?
Thanks