Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Gatsby, fast content based websites with React

Avatar for Cheesecake Labs Cheesecake Labs
December 04, 2019
Programming
77
0

Gatsby, fast content based websites with React

Avatar for Cheesecake Labs

Cheesecake Labs

December 04, 2019

More Decks by Cheesecake Labs

See All by Cheesecake Labs
Cats' wellness & care
Avatar for Cheesecake Labs cheesecakelabs
0
88
How do we create the first impressions?
Avatar for Cheesecake Labs cheesecakelabs
0
98
Menstrual cup: suit and freedom
Avatar for Cheesecake Labs cheesecakelabs
0
120
Life is a cycle, better with a bicycle
Avatar for Cheesecake Labs cheesecakelabs
0
96
Interview Process: how to get the best of people
Avatar for Cheesecake Labs cheesecakelabs
1
150
My capsule wardrobe experience
Avatar for Cheesecake Labs cheesecakelabs
3
110
Stonewall Rebellion and its impact on LGBTQIA+ history
Avatar for Cheesecake Labs cheesecakelabs
1
78
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
Avatar for Cheesecake Labs cheesecakelabs
0
86
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
180

Other Decks in Programming

See All in Programming
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
4
2k
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
290
What We Talk About When We Talk About XP
Avatar for seki at druby.org m_seki
2
640
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
430
Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
960
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
3
550
LL言語やWebフレームワークの PostgreSQL対応 〜DBの機能がユーザーに届くまで〜
Avatar for 武田 憲太郎 kentaroutakeda
1
150
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
5
3.1k
一人だけ、Kiroが静止する日
Avatar for Hideyuki Nagata hideg
0
110
iOSDC Japan 2026 - Swiftで作って学ぼう！データベース自作入門
Avatar for kaseken (Kent Kaseda) kaseken
2
170
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
140
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会！〜〇〇への誘い〜 #n_study
Avatar for mazrean mazrean
0
240

Featured

See All Featured
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
230
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
810
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
840
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
410

Transcript

  1. Gatsby Gatsby is a free and open source framework based

    on React that helps developers build blazing fast websites and apps

  2. Gatsby is a "static" website generator

  3. None
  4. None

  5. 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/

  6. Content is the king (Data sources)

  7. None

  8. https://www.gatsbyjs.org/docs/how-plugins-apis-are-run/

  9. Node runner Data sources Create node (reducer) Call onCreateNode Provide

    data to query Build

  10. How to query the data

  11. None
  12. None
  13. None

  14. 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
  15. None

  16. Performance Optimization Performance is hard. Let’s make Gatsby do the

    work.

  17. https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast/#reach-skip-nav

  18. Image performance Ohhh myyyyy

  19. https://using-gatsby-image.gatsbyjs.org/ The problem: Large, unoptimized images dramatically slow down your

    site.
  20. None

  21. Everything is a plugin 1480 plugins today

  22. None
  23. None

  24. Nothing is perfect Pages (solves with a plugin), variables inside

    query), cache and build time problems on deploy (netlify)

  25. Why we should use at CKL?

  26. Real world projects

  27. Questions?

  28. Thanks