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
33
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
45
How do we create the first impressions?
cheesecakelabs
0
48
Menstrual cup: suit and freedom
cheesecakelabs
0
52
Life is a cycle, better with a bicycle
cheesecakelabs
0
46
Interview Process: how to get the best of people
cheesecakelabs
1
72
My capsule wardrobe experience
cheesecakelabs
3
51
Stonewall Rebellion and its impact on LGBTQIA+ history
cheesecakelabs
1
34
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
cheesecakelabs
0
41
MBTI - Psychological types described by Jung
cheesecakelabs
0
120
Other Decks in Programming
See All in Programming
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Grafana Cloudとソラカメ
devoc
0
140
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
DROBEの生成AI活用事例 with AWS
ippey
0
130
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
『品質』という言葉が嫌いな理由
korimu
0
160
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
Automating Front-end Workflow
addyosmani
1367
200k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Designing for Performance
lara
604
68k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Rails Girls Zürich Keynote
gr2m
94
13k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Designing Experiences People Love
moore
139
23k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
How to train your dragon (web standard)
notwaldorf
90
5.8k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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