Download to read offline
Uploaded byBorek Bernard
Gatsby vs. Next.js
This document compares GatsbyJS and Next.js web frameworks. It recommends using Gatsby for static sites due to its easy data integration and plugins. Next.js is recommended for applications and complex/dynamic sites as it supports server-side rendering and has few downsides compared to plain React. Both frameworks use React under the hood, so the skills are largely transferable between the two.
More Related Content
Gatsby vs. Next.js
- 1. Gatsby vs. Next.js GatsbyJSmeetup Prague, 14 Nov 2019
- 2. I am asoftware engineer
- 3. ... forced tomake websites
- 4. 2000's & mostof 2010's: blogs → WordPress simple sites → plain HTML
- 5. It was both✌ and 🤕
- 6. WordPress ✅ Complex sitesquickly ✅ Themes & plugins ✅ Lots of resources
- 7. WordPress 🙁 Ugly oldcodebase 🐌 Slow by default 😭 No version control
- 8. Plain old HTML Confession:I actually enjoyed it
- 9. Plain old HTML ...but was really unproductive with it
- 10. In the meantime,React ⚛ happened
- 11. I quickly fellin love
- 12. We adopted itfor VersionPress' UI in 2015
- 13. ... and builta VP.com dashboard with it
- 14. We were buildingapps in React
- 15. But websites werestill WordPress & plain HTML
- 16.
- 17. I'm trying itfor our VP.com website
- 18.
- 19. no servers tomanage hack
- 20.
- 21. New kind ofexperience ⇒ questioning old truths
- 22. 🤔 Why dowe build SPAs?
- 23. <!DOCTYPE html><!DOCTYPE html> <<htmlhtmllanglang==""enen"">> <<bodybody>> <<divdiv idid==""rootroot"">></</divdiv>> <<scriptscript typetype==""text/javascripttext/javascript"" srcsrc==""/static/vendors.js/static/vendors.js"">></</scriptscript>> <<scriptscript typetype==""text/javascripttext/javascript"" srcsrc==""/static/app.js/static/app.js"">></</scriptscript>> </</bodybody>> </</htmlhtml>> Why are we serving this to our users?
- 24. But we keptat it.
- 25.
- 27. Would Gatsby bea good fit?
- 30. By "SSR", Gatsbymeans build-time pre-rendering Dear sirs, SSR !== pre-rendering. Best regards, Borek
- 32. It felt quitepoor in comparison: Barebones (no plugin system, no themes, ...) No universal data layer via GraphQL Fewer optimizations out of the box
- 33. But it hadSSR and eshops abso-freakin-lutely need SSR
- 34. Next.js also feltbetter than other choices
- 35.
- 36. ... and itfelt really good! (see the pattern? ❤❤❤)
- 37. Being barebones wasa benefit for Shoptet's platform
- 38. Data fetching howeverwe wanted (we chose GraphQL anyway 😄 )
- 39. The best runtimemodel I've seen to date
- 40.
- 41.
- 42. So... When to usewhich?
- 43. 1. For staticsites, I'd use Gatsby
- 44. Easily combine datafrom multiple sources Markdown WordPress `gatsby-source-*` Many plugins available Great performance
- 45. 2. For apps,I'd use Next
- 46. See e.g. Kap Next.jshas almost no downsides compared to plain React app / CRA
- 47. 3. For complex/ dynamic sites, clearly Next
- 48. Both pre-rendering (alaGatsby) and SSR Not too complex, not too simple Super-powers when combined with Now ▲
- 49.
- 50.
- 51. ⚛ One set ofskills Code is 95% the same Both built on React, Babel, webpack, ...
- 52. (4. For aslide deck, I'd use Gatsby & mdx-deck 😄 . Repo.) Thank you! -- @borekb