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
86
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
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
CSC305 Lecture 11
javiergs
PRO
0
280
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
110
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
CSC509 Lecture 07
javiergs
PRO
0
250
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
510
マンガアプリViewerの大画面対応を考える
kk__777
0
320
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Producing Creativity
orderedlist
PRO
347
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Optimizing for Happiness
mojombo
379
70k
Code Reviewing Like a Champion
maltzj
526
40k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Context Engineering - Making Every Token Count
addyosmani
8
300
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
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