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
74
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
83
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
90
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
96
Stonewall Rebellion and its impact on LGBTQIA+ history
Avatar for Cheesecake Labs cheesecakelabs
1
75
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
Avatar for Cheesecake Labs cheesecakelabs
0
80
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
180

Other Decks in Programming

See All in Programming
引き算の組織 ― アウトカムとAIに全振りするために辞めたこと ― / Organization by Subtraction
Avatar for ヤマモトヒロキ hirokiyamamoto14
PRO
0
310
Press start. Python's next generation.
Avatar for Carol Willing willingc
PRO
3
250
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
Avatar for Shota Nemoto shorty5121
0
190
初めての模倣学習とVLA
Avatar for Minoru Natsutani natsutan
0
310
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
Avatar for wat wat
0
570
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
Avatar for ternbusty ternbusty
1
170
Hello, Hiroshima Geospatial Data! — Exploring DoboX with Python
Avatar for ぴっかりん ra0kley
0
110
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
340
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
3
1.3k
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
Avatar for endo shiki shiki_kakaku
1
2k
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
Avatar for Tatsuki tatsuki12
4
1.1k
高専キャリア LT 発表内容
Avatar for Crysta1221 crysta1221
3
4k

Featured

See All Featured
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
360
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4.5k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
480
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
270
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
480
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
810
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
220

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