Gatsby vs. Next.js

•

1 recomendación•669 vistas

Borek Bernard

GatsbyJS meetup, Prague, 14 Nov 2019

Tecnología

2000's & most of 2010's:
blogs → WordPress
simple sites → plain HTML

WordPress
✅ Complex sites quickly
✅ Themes & plugins
✅ Lots of resources

WordPress
🙁 Ugly old codebase
🐌 Slow by default
😭 No version control

Plain old HTML
Confession: I actually enjoyed it

Plain old HTML
... but was really unproductive with it

We adopted it for VersionPress' UI in 2015

... and built a VP.com dashboard with it

But websites were still WordPress & plain HTML

New kind of experience ⇒ questioning old truths

<!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?

By "SSR", Gatsby means build-time pre-rendering
Dear sirs, SSR !== pre-rendering. Best regards, Borek

It felt quite poor in comparison:
Barebones (no plugin system, no themes, ...)
No universal data layer via GraphQL
Fewer optimizations out of the box

But it had SSR
and eshops abso-freakin-lutely need SSR

Next.js also felt better than other choices

... and it felt really good!
(see the pattern? ❤❤❤)

Being barebones was a benefit for Shoptet's platform

Data fetching however we wanted
(we chose GraphQL anyway 😄 )

The best runtime model I've seen to date

Easily combine data from multiple sources
Markdown
WordPress
`gatsby-source-*`
Many plugins available
Great performance

See e.g. Kap
Next.js has almost no downsides
compared to plain React app / CRA

3. For complex / dynamic sites, clearly Next

Both pre-rendering (ala Gatsby) and SSR
Not too complex, not too simple
Super-powers when combined with Now ▲

⚛
One set of skills
Code is 95% the same
Both built on React, Babel, webpack, ...

(4. For a slide deck, I'd use Gatsby & mdx-deck 😄 . Repo.)
Thank you!
--
@borekb

Más contenido relacionado

La actualidad más candente

Gatsby Themes: Better, Faster, Flexible-erGatsbyjs

PaperclipPatrick Crowley

Using Backbone with CakePHPRichard McIntyre

Stripe con 2021 UI stackMaximeRainville1

Testing Angular Applications - Jfokus 2017Matt Raible

The WordPress REST API as a Springboard for Website GreatnessWP Engine UK

Optimizing Your Site for Holiday TrafficWP Engine UK

Blazor - C# for the webWekoslav Stefanovski

What's New in JHipsterLand - DevNexus 2017Matt Raible

CoffeeScript presentationJohn Lynch

Node.js Lightning TalkCodeSlice

JS digest. April 2018ElifTech

Handle the errorCocoaHeads France

Node.JS| Coffeescript PresentationSam Frons

Building desktop applications with web technologies - ELECTRON the easy waystefanjudis

Dial up your flowWes Eklund

Beyond the StandardsPaul Bakaus

Rails For Legacy AppsPatrick Crowley

When Javascript isn't Javascript Tristan Gomez

Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017Matt Raible

La actualidad más candente (20)

Gatsby Themes: Better, Faster, Flexible-er

Paperclip

Using Backbone with CakePHP

Stripe con 2021 UI stack

Testing Angular Applications - Jfokus 2017

The WordPress REST API as a Springboard for Website Greatness

Optimizing Your Site for Holiday Traffic

Blazor - C# for the web

What's New in JHipsterLand - DevNexus 2017

CoffeeScript presentation

Node.js Lightning Talk

JS digest. April 2018

Handle the error

Node.JS| Coffeescript Presentation

Building desktop applications with web technologies - ELECTRON the easy way

Dial up your flow

Beyond the Standards

Rails For Legacy Apps

When Javascript isn't Javascript

Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

Similar a Gatsby vs. Next.js

Performance Tuning Web Apps - The Need For SpeedVijay Rayapati

GraphQL Bangkok Meetup 6.0Tobias Meixner

Monitoring at a SAAS Startup: Tradeoffs and Toolsbridgetkromhout

Using the WordPress REST API and Gatsby.jsIndigo Tree Digital

WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo MeetuprtCamp

Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?CodeValue

1. Let's study web-developmentJungwon Seo

Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...rtCamp

Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann

Copass + Ruby on Rails = <3 - From Simplicity to ComplexityAugustin Riedinger

Easy Decoupled Sitebuilding with GraphQL and Next.jsJani Tarvainen

Rails Vs CakePHPGautam Rege

Viacheslav Eremin interview about DOT NET (eng lang)Viacheslav Eremin

MyReplayInZenViacheslav Eremin

Deploying Web Apps with PaaS and Docker ToolsEddie Lau

React Conf, Dhaka 2018 - Understanding React: The React Way of Doing Things b...Tamal Chowdhury

JAMstack with gatsby, contentful and netlify aka the dream stackzonathen

Deploying Machine Learning in production without servers - #serverlessCPHDamien Cavaillès

Share point developer who’s thatKanji AnilKumar

Atomic Design with Next.jsPatrick Smith

Similar a Gatsby vs. Next.js (20)

Performance Tuning Web Apps - The Need For Speed

GraphQL Bangkok Meetup 6.0

Monitoring at a SAAS Startup: Tradeoffs and Tools

Using the WordPress REST API and Gatsby.js

WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo Meetup

Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?

1. Let's study web-development

Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...

Leveling up your JavaScipt - DrupalJam 2017

Copass + Ruby on Rails = <3 - From Simplicity to Complexity

Easy Decoupled Sitebuilding with GraphQL and Next.js

Rails Vs CakePHP

Viacheslav Eremin interview about DOT NET (eng lang)

MyReplayInZen

Deploying Web Apps with PaaS and Docker Tools

React Conf, Dhaka 2018 - Understanding React: The React Way of Doing Things b...

JAMstack with gatsby, contentful and netlify aka the dream stack

Deploying Machine Learning in production without servers - #serverlessCPH

Share point developer who’s that

Atomic Design with Next.js

Más de Borek Bernard

WordPress + GatsbyBorek Bernard

Git in 10 minutes (WordCamp London 2018)Borek Bernard

Jak tu věc dostat do produkce (WordCamp Praha 2018)Borek Bernard

Git in 10 minutes (WordCamp Europe 2017)Borek Bernard

VersionPress: představení & kam se za rok posunulBorek Bernard

WordPress REST API + React + TypeScriptBorek Bernard

VersionPress – proč, jak a za kolik (#wcbratislava 2016)Borek Bernard

WordPress, React, oh my! (DevelCZ 2016)Borek Bernard

React for WordPress developersBorek Bernard

Update o VersionPressu 2.0Borek Bernard

WordPress jako příležitost (@Frontendisti 03/2015)Borek Bernard

Verzování WordPress webů (#wpkonference 11/2014)Borek Bernard

MarkdownBorek Bernard

VersionPress - jak dělat WP weby lépeBorek Bernard

Más de Borek Bernard (14)

WordPress + Gatsby

Git in 10 minutes (WordCamp London 2018)

Jak tu věc dostat do produkce (WordCamp Praha 2018)

Git in 10 minutes (WordCamp Europe 2017)

VersionPress: představení & kam se za rok posunul

WordPress REST API + React + TypeScript

VersionPress – proč, jak a za kolik (#wcbratislava 2016)

WordPress, React, oh my! (DevelCZ 2016)

React for WordPress developers

Update o VersionPressu 2.0

WordPress jako příležitost (@Frontendisti 03/2015)

Verzování WordPress webů (#wpkonference 11/2014)

Markdown

VersionPress - jak dělat WP weby lépe

Último

MINDCTI Revenue Release Quarter One 2024MIND CTI

WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays

Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya

[BuildWithAI] Introduction to Gemini.pdfSandro Moreira

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays

Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services

Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays

Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood

DBX First Quarter 2024 Investor PresentationDropbox

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.

25. 2019: New project

26.

27. Would Gatsby be a good fit?

28.

29.

30. By "SSR", Gatsby means build-time pre-rendering Dear sirs, SSR !== pre-rendering. Best regards, Borek

31.

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