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
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
GAEログのコスト削減
mot_techtalk
0
110
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Domain-Driven Transformation
hschwentner
2
1.9k
Grafana Cloudとソラカメ
devoc
0
140
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Building an army of robots
kneath
302
45k
Embracing the Ebb and Flow
colly
84
4.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
What's in a price? How to price your products and services
michaelherold
244
12k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Bash Introduction
62gerente
610
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Become a Pro
speakerdeck
PRO
26
5.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.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