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
『品質』という言葉が嫌いな理由
korimu
0
160
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
Rails アプリ地図考 Flush Cut
makicamel
1
110
チームリードになって変わったこと
isaka1022
0
190
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Introduction to kotlinx.rpc
arawn
0
630
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
技術を根付かせる / How to make technology take root
kubode
1
240
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Practical Orchestrator
shlominoach
186
10k
A Tale of Four Properties
chriscoyier
158
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Designing for Performance
lara
604
68k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Site-Speed That Sticks
csswizardry
3
370
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
A better future with KSS
kneath
238
17k
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