Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Gatsby vs. Next.js
Similaire à Gatsby vs. Next.js (20)
Plus de Borek Bernard
Plus de Borek Bernard (14)
Dernier
Dernier (20)
Gatsby vs. Next.js
- 1. Gatsby vs. Next.js GatsbyJS meetup Prague, 14 Nov 2019
- 2. I am a software engineer
- 3. ... forced to make websites
- 4. 2000's & most of 2010's: blogs → WordPress simple sites → plain HTML
- 5. It was both ✌ and 🤕
- 6. WordPress ✅ Complex sites quickly ✅ Themes & plugins ✅ Lots of resources
- 7. WordPress 🙁 Ugly old codebase 🐌 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 fell in love
- 12. We adopted it for VersionPress' UI in 2015
- 13. ... and built a VP.com dashboard with it
- 14. We were building apps in React
- 15. But websites were still WordPress & plain HTML
- 16. 2018: Gatsby explodes 💥
- 17. I'm trying it for our VP.com website
- 18. ❤❤❤ SPEEED ❤❤❤
- 19. no servers to manage hack
- 20. React ⚛
- 21. New kind of experience ⇒ questioning old truths
- 22. 🤔 Why do we build SPAs?
- 23. <!DOCTYPE html><!DOCTYPE html> <<htmlhtml langlang==""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 kept at it.
- 27. Would Gatsby be a good fit?
- 30. By "SSR", Gatsby means build-time pre-rendering Dear sirs, SSR !== pre-rendering. Best regards, Borek
- 32. It felt quite poor in comparison: Barebones (no plugin system, no themes, ...) No universal data layer via GraphQL Fewer optimizations out of the box
- 33. But it had SSR and eshops abso-freakin-lutely need SSR
- 34. Next.js also felt better than other choices
- 35. So we tried it
- 36. ... and it felt really good! (see the pattern? ❤❤❤)
- 37. Being barebones was a benefit for Shoptet's platform
- 38. Data fetching however we wanted (we chose GraphQL anyway 😄 )
- 39. The best runtime model I've seen to date
- 40. Source
- 41. ZEIT Now deployments 😍 ▲
- 42. So... When to use which?
- 43. 1. For static sites, I'd use Gatsby
- 44. Easily combine data from 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.js has almost no downsides compared to plain React app / CRA
- 47. 3. For complex / dynamic sites, clearly Next
- 48. Both pre-rendering (ala Gatsby) and SSR Not too complex, not too simple Super-powers when combined with Now ▲
- 50. Both are ⚛
- 51. ⚛ One set of skills Code is 95% the same Both built on React, Babel, webpack, ...
- 52. (4. For a slide deck, I'd use Gatsby & mdx-deck 😄 . Repo.) Thank you! -- @borekb