Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gatsby, fast content based websites with React

Avatar for Cheesecake Labs Cheesecake Labs
December 04, 2019
Programming
70
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
75
How do we create the first impressions?
Avatar for Cheesecake Labs cheesecakelabs
0
88
Menstrual cup: suit and freedom
Avatar for Cheesecake Labs cheesecakelabs
0
100
Life is a cycle, better with a bicycle
Avatar for Cheesecake Labs cheesecakelabs
0
88
Interview Process: how to get the best of people
Avatar for Cheesecake Labs cheesecakelabs
1
130
My capsule wardrobe experience
Avatar for Cheesecake Labs cheesecakelabs
3
92
Stonewall Rebellion and its impact on LGBTQIA+ history
Avatar for Cheesecake Labs cheesecakelabs
1
69
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
Avatar for Cheesecake Labs cheesecakelabs
0
73
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
170

Other Decks in Programming

See All in Programming
SREは、MCPとSRE Agentをこう使え！
Avatar for kazumax55 kazumax55
0
150
鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力
Avatar for tonkotsuboy_com tonkotsuboy_com
4
1.1k
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
Avatar for Hajime Kato hjmkth
1
360
【やさしく解説 設計編 #0】DDDのコード、読めるのに分からない人へ
Avatar for HideyukiKitao panda728
PRO
2
270
symfony/aiとlaravel/boost
Avatar for Hiromi Hishida 77web
0
130
地域 SRE コミュニティ最前線 - ホンマでっかSRE勉強会
Avatar for tk3fftk tk3fftk
0
240
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
2.7k
【やさしく解説 設計編 #1】「ドメイン駆動」と「実装駆動」ってなに？ 〜設計の考え方を、たとえ話で学ぼう〜
Avatar for HideyukiKitao panda728
PRO
1
120
yield再入門 #phpcon
Avatar for hideki kinjyo o0h
PRO
0
470
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
Avatar for luccafort luccafort
PRO
0
390
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
2
540
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
350

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
How to make the Groovebox
Avatar for あそなす asonas
2
2.3k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
150
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.6k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
230
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
350
A Soul's Torment
Avatar for Nat Ma seathinner
6
3.1k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k

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