Gatsby, fast content based websites with React

Gatsby, fast content based websites with React


Cheesecake Labs

December 04, 2019


  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
  6. Content is the king (Data sources)

  7. None

  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


  18. Image performance Ohhh myyyyy

  19. The problem: Large, unoptimized images dramatically slow down your

  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