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
71
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
79
How do we create the first impressions?
Avatar for Cheesecake Labs cheesecakelabs
0
89
Menstrual cup: suit and freedom
Avatar for Cheesecake Labs cheesecakelabs
0
110
Life is a cycle, better with a bicycle
Avatar for Cheesecake Labs cheesecakelabs
0
89
Interview Process: how to get the best of people
Avatar for Cheesecake Labs cheesecakelabs
1
140
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
74
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
Avatar for Cheesecake Labs cheesecakelabs
0
74
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
170

Other Decks in Programming

See All in Programming
PHP に部分適用が来るぞ！……ところで何それ？おいしいの？ #phpcon / phpcon-2026
Avatar for shogogg shogogg
0
600
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
4
1.6k
Lean は証明の正しさを確認するためだけのツールって思ってませんか？
Avatar for 井上亜星 inoueasei
1
150
OpenSpecのproposalにbrainstormingを持たせてみた
Avatar for Toranosuke Minamikawa tigertora7571
1
210
数百円から始めるRuby電子工作
Avatar for Tarosa tarosay
0
140
「寝てても仕事が進む」Claude Codeで組む第二の脳
Avatar for t-fujita24 tomoyafujita2016
0
310
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
3
760
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
140
その節約、円になってますか？
Avatar for isamu asakawa isamumumu
1
700
Android CLI
Avatar for Sungyong An fornewid
0
210
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
140
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
Avatar for starfish719 starfish719
0
4k

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
270
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
480
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
340
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
180
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
45k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
540
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
360

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