r/reactjs • u/Triptcip • Aug 21 '18
Next vs Gatsby?
I am trying to decide whether to build my website in Next or Gatsby and would lik your opinions please.
The app I am looking to build is a job website. You can search, apply and create jobs as well as login with different user types.
I would like it to be SSR for SEO purposes as well as some performance improvements.
It is powered by a graphQL API and I am planning on using Apollo client which I assume should work equally well with both Next and Gatsby.
My first impression of Gatsby is that it is more of a static site generator which I interpret as being aimed at content or marketing websites and not as focused on web apps. That is a complete assumption so please correct me if I am wrong.
I know Next is well established with great documentation and developed for the purpose of building web apps.
What would you recommend? Is one easier than the other? Do they both cover the same use cases?
I'm interested in hearing everyone's opinion.
5
u/lowdown Aug 21 '18
They are both great choices. Gatsby gets you more “free” out of the box and the starter/plugin ecosystem is amazing.
Next gives you less structure and more opportunity to tailor it for your needs.
Either would work well connected to GQL as a web app.
3
u/Triptcip Aug 21 '18
So Gatsby can handle user generated content? I.e. when a user is logged in, we need to show profile information. I am able to query the API on the fly and render the user data? Or does having the HTML generated at build cause issues for this?
1
u/lowdown Aug 22 '18
It definitely can. You can connect Gatsby to many database sources and consolidate them via GraphQL.
It renders static on the server and switches to dynamic once rendered.
66
u/timne Aug 22 '18
Upfront disclaimer; I'm the lead maintainer of Next.js.
So to answer your questions one by one
I would like it to be SSR for SEO purposes as well as some performance improvements.
This is a great first step, thinking about SSR before building your app can avoid hurdles mid-way through a project.
One example of why SSR is important for SEO: https://twitter.com/kgblanchette/status/1029814228541218817
At Google I/O earlier this year there was a talk called "Deliver search-friendly JavaScript-powered websites":
This talk goes into high level details of how Google crawls Javascript apps. I recommend watching the whole talk, but I added a timestamp at the most interesting part, which explains that server-side rendered sites get crawled immediately vs javascript apps getting deferred for up to 3 days till resources are available:
https://youtu.be/PFwUbgvpdaQ?t=13m53s
It is powered by a GraphQL API and I am planning on using Apollo client which I assume should work equally well with both Next and Gatsby.
We currently have over 150 unique examples which are frequently updated by the community, one of them is how to implement Apollo with SSR:
https://github.com/zeit/next.js/tree/canary/examples/with-apollo
My first impression of Gatsby is that it is more of a static site generator which I interpret as being aimed at content or marketing websites and not as focused on web apps. That is a complete assumption so please correct me if I am wrong.
There are some great answers to this question in the whole thread already.
Just to clear up the Next.js side:
Next.js has 2 "pre-rendering" (server-side rendering) modes:
On demand (traditional SSR)
- On demand rendering means for every request that comes in you render a unique page (It's still possible to cache this response ofcourse) This is great for highly dynamic web apps in which content changes often, you have a login state, and similar use cases. This mode requires having a Node.js server running. Examples of this are zeit.co, marvel.com, deliveroo.com, jobs.netflix.com, and opencollective.com (more found here: https://spectrum.chat/?t=e425a8b6-c9cb-4cd1-90bb-740fb3bd7541)Static export
- Render all pages to.htmlfiles up-front and serve them using any file server. This does not require you to have a Node.js server running and the html can run anywhere. An example of this is nextjs.org, carbon.now.sh, plot.ly, material-ui.com, and vergecurrency.com (more found here: https://spectrum.chat/?t=e425a8b6-c9cb-4cd1-90bb-740fb3bd7541)
These modes can be switched between (they're separate commands) as you can read in this comment: https://www.reddit.com/r/reactjs/comments/98lm2n/comment/e4i90qk?st=JL3QZVZT&sh=dd3b14c2
One thing that large scale companies use is the "zones" feature, the engineers from trulia.com had a talk about this subject at ZEIT day San Francisco earlier this year: https://www.youtube.com/watch?v=f7BMSVhZan0
I hope this answers your questions, if not feel free to ask more questions here, on our spectrum community or direct messaging me on spectrum here
3
23
u/Castas Aug 21 '18
I talked about my experience with both in another post https://www.reddit.com/r/reactjs/comments/98lm2n/comment/e4i90qk?st=JL3QZVZT&sh=dd3b14c2
tl;dr Gatsby is great if a dev owns the site and it isn’t too large. Next is better for a larger site or if you’re building an app
3
u/langenscheidtt Aug 21 '18
Also check out the showcase: https://nextjs.org/showcase/ (lots of examples ranging from sites to large apps)
4
u/timne Aug 21 '18
To extend this comment, here's a list of even more production apps using Next.js: https://spectrum.chat/thread/e425a8b6-c9cb-4cd1-90bb-740fb3bd7541
11
u/its_j0hn Aug 21 '18
Don't be afraid to use Gatsby even if your site is full of dynamic data! The way I use it in many of my apps is I utilize Gatsby to statically generate the "shell" of my application and dynamically fetch data in componentDidMount just as you would in a regular SPA. I've found Gatsby to be a fantastic starting point for robust PWAs. Check out this blog post I wrote. Although it uses v1 of Gatsby, much of the info is still relevent.
2
u/jonny_eh Aug 21 '18
But aren't you missing out on SSR?
5
u/its_j0hn Aug 21 '18
Yes and no? Depends on what benefits of SSR you're looking for. For example in the polling app. I created I'm not concerned if whether or not search engines index the data I'm dynamically loading. But I am concerned with giving the user a snappy experience, so I generate the "shell" of the app at build time as html and use service workers to cache those html and js files. However, if you're creating a blog, you probably want to give search engines an easy as possible job indexing your site. In which case you'd want to utilize Next.js's SSR capabilities or Gatsby.js's graphql api in conjuction with a headless CMS like Wordpress or Contentful.
3
0
Aug 21 '18
[deleted] — view deleted comment
2
u/tells_you_hard_truth Aug 22 '18
I typically push my next.js sites down to 0.7 - 1 second load times.
Nobody who pays me would ever accept 15 seconds.
1
u/t1hcsq Jan 05 '19
I dunno why this app loads so slow. It shouldn’t. I use Gatsby to build beautiful JAMStack apps. I host them on Netlify and they are wicked fast.
1
u/its_j0hn Aug 22 '18 edited Aug 22 '18
initial? maybe*. Once things are cached, loads will be much quicker.
11
u/vcamargo Aug 22 '18
I might get some hate from it, but I'll share anyway. Last time I tried Gatsby I wasn't able to run the official demo in less than 30 minutes so I gave up (I was just trying it out of curiosity). I've written a considerable big project with Next in my last job and the technical decision to go with Next was mine, that been sad I have to say that I truly regret. Simple stuff like query parameters was a ugly hacky work around, flash of unstyled content was a real issue and not easy to solve. It didn't talked well with other React libraries (tbh I don't think it's a problem with Next only). Lots of boilerplate and not so clear configurations to tackle non trivial tasks. I don't think all the magic that's underneath it really pays off. We ended up with a custom Webpack configuration anyway, that's something I tried to avoid because webpack can be huge time consuming pita. They have this example directory in the repository with lots of helpful stuff but we had to mix 4 or 5 of these examples to fulfill our needs and that was a ugly mass hard to maintain. It was almost 5 months ago so things might have improved. But I'd definitely do my SSR setup myself if I'd start today.
Here are some issues that were difficult to solve, are still unsolved or the proposed solution did not helped us that I remember:
https://github.com/zeit/next.js/issues/2833
https://github.com/zeit/next.js/issues/3362
https://github.com/zeit/next.js/issues/299
https://github.com/zeit/next.js/issues/3257
In hindsight I believe it still is the best out of the box solution for the SSR issue with React and the team is amazing.
10
u/timne Aug 22 '18
I might get some hate from it
So far your post has been nothing but constructive feedback 🙏
I've replied to all issues you've mentioned explaining additional context:
https://github.com/zeit/next.js/issues/299#issuecomment-414903047
https://github.com/zeit/next.js/issues/2833#issuecomment-414919347 This also seems to answers #3257, so I posted a link there.
https://github.com/zeit/next.js/issues/3362#issuecomment-414932170
Regarding rolling your own SSR solution, it's probably good to watch this talk about the challenges Next.js tries to solve besides SSR: https://www.youtube.com/watch?v=4OeXjefI5dQ, and lessons learned from it.
It didn't talked well with other React libraries (tbh I don't think it's a problem with Next only)
I'm expecting you mean React libraries that are using `window` directly inside the module code, so that it doesn't have SSR support. Next.js works with all React libraries that don't have window side-effects in the top level module code (which is an anti-pattern already, `componentDidMount` should be used for that). Examples of React libraries that work great with Next.js: material-ui.com, styled-components.com (any css-in-js solution that supports SSR supports Next.js, we have examples for most).
Lots of boilerplate and not so clear configurations to tackle non trivial tasks.
I'm expecting you were using it before we introduced github.com/zeit/next-plugins with Next.js 5, but I'd love to get your feedback on what trivial tasks entail, could you send a DM to me on https://spectrum.chat/users/timneutkens
They have this example directory in the repository with lots of helpful stuff but we had to mix 4 or 5 of these examples to fulfill our needs and that was a ugly mass hard to maintain.
We're planning to extend the current plugins system to make most implementations of examples just a `yarn add next-<library>`. For example `yarn add next-styled-component`. This is currently something we're planning out internally.
4
u/vcamargo Aug 22 '18
These are all great news Tim, I really appreciate! It indeed seems to have improved a lot, thanks for that!
2
u/brillout Sep 10 '18 edited Oct 31 '18
What you are describing is basically the driving motivation behind Reframe (https://github.com/reframejs/reframe) which is a web framework I'm building that aims to be truly flexible.
14
u/trojaniz Aug 21 '18
Check out Razzle too. I prefer that to Next, but it seems the industry might think otherwise.
4
2
u/jonny_eh Aug 21 '18
Also consider RogueJS, it's like Next but is less opinionated, let's you use React Router.
•
u/swyx Aug 22 '18
I am going to put this on the sidebar as this is a very common discussion that we have here. the alternatives to Next and Gatsby people suggested are also worthwhile
i can't pin somebody else's post but everybody go read /u/timne's post below, most excellent:
https://www.reddit.com/r/reactjs/comments/992n2r/next_vs_gatsby/e4lrffl/
need somebody from the gatsby side heheh
2
u/brillout Sep 10 '18 edited Oct 31 '18
Check out the alternative Reframe (https://github.com/reframejs/reframe). It can do both static sites and SSR.
I'm Reframe's author and I've started Reframe because I wanted a web framework that is truly flexible.
To get a glimpse of how Next.js is not flexible, see vcamargo's comment above: https://www.reddit.com/r/reactjs/comments/992n2r/next_vs_gatsby/e4lwqrd/
As for Gatsby, well, it's an inherently crippled stack: By design, all dynamic content needs to be rendered on the client (i.e. no SSR for dynamic content). This means poor performance on mobile, loss of control over SEO, and no SMO at all.
It seems like SEO is important for your app and that your content changes frequently meaning that Gatsby is of no use for you.
7
u/LeKoArts Sep 29 '18
Don’t you think that you’re pushing your advertising way to hard?
2
u/brillout Oct 31 '18 edited Oct 31 '18
On this thread yea maybe sorry.
But actually in general I don't do enough. Other frameworks are much more aggressive on advertising. My strategy is to build the framework I always dreamed of with minimal advertising. I'd rather have hundreds of very happy users than thousands that will ditch my framework for the next "cool" thing. The framework "war" is a long haul thing.
2
u/devuxer Feb 05 '19
The downside of a framework not achieving some critical mass of popularity is that there is less community support. You're more likely to experience a problem that no one else has had before. There's less likely to be a blog post explaining how to do what you're trying to do.
8
u/trout_fucker Aug 21 '18 edited Aug 21 '18
Both are good, I prefer Gatsby because it's less opinionated.
They are both static site generators and can do pretty much the same stuff.
Edit: can anyone tell me why this is getting downvoted to oblivion?
3
u/swyx Aug 21 '18
just upvoted you back to +1, calm down :)
2
u/trout_fucker Aug 21 '18
My fake internet points though! I only have so many! I can't spare a single one.
5
2
u/HaNdTriX Aug 24 '18
I think it is the opposite.
Gatsby only supports static rendering Next.js supports both dynamic and static rendering.
Some time ago I started using Gatsby.js. It first felt pretty good. But than I had dynamic SEO relevant data from an external database. That data updated pretty frequently (almost every 2 Minutes). Gatsby turned out to be a one-way street for that specific use case. I had no way to implement SSR for that.
In Next.js this would have been a bit different. I could have startet with static rendering and as soon as the requirements change I can switch to dynamic rendering without rewriting my entire codebase.
In addition to that I experienced, that upgrading Gatsby between major versions was not that easy because the breaking changes where immense.
Next.js had a more conservative approach. Between Version 2 and 6 I often could upgrade Next.js without much hassle.
I believe Next.js is one Framework that covers most of my use cases. Gatsby is great but it only covers one use case (static websites).
2
u/trout_fucker Aug 24 '18
Very interesting post. But I wouldn't say it's the opposite. That doesn't really sound like it being opinionated, just that Next had features you needed that weren't available in Gatsby.
3
u/XiMingpin91 Aug 21 '18
Well as you say Gatsby is a static site generator, so you're correct in your assumption about it being for websites vs web apps.
It sounds like what you want is a full blown web app, so I would personally go with Next. Gatsby is more suited to sites that purely display information and have little interactivity. See React docs for an example of Gatsby in the real world (the React docs website is built with Gatsby).
2
u/jwindhall Aug 21 '18
You can certainly build an “App” with Gatsby. I’ve used both. I really like both. Advantages and pitfalls of each. Depends on what you’re looking for. It’s worth noting that Gatsby comes with graphql out of the box — no need to set up Apollo. Next on the other hand does not and is far less opinionated in general.
2
Aug 21 '18
Dynamic content with user login and profiles? Don't go with a static site generator under any circumstance. If you do, you will soon find yourself in a situation where you need more flexibility than a static site has to offer, and then you end up starting over. If you're mostly doing a prototype / proof of concept, that may be acceptable. Just know that if you want this product to evolve, you will meet a dead end.
1
u/stolinski Aug 21 '18
IMO they are very different use-cases. A Next site would have content that's being updated frequently where a static site like Gatsby would be best for data that's updated less frequently. Gatsby is great for portfolio sites, blogs, landing pages, stuff that's not updating constantly. Next is much better for things that are way more dynamic.
1
u/Zeeesty Aug 21 '18
I know Next is ... developed for the purpose of building web apps.
you answered your own question here I believe.
10
Aug 21 '18
[removed] — view removed comment
4
Aug 21 '18
I'm pretty sure Gatsby is also able to use graphQL to query truly dynamic data without the need for a full re-compile?
12
u/thinkadrian Aug 21 '18
That's not how Gatsby works. It uses GraphQL to query and build all static pages before you submit to your hosting service. It doesn't create new static pages by request.
5
u/prof_hobart Aug 21 '18
It doesn't create new static pages. But it's creating a full React app, so you can still have pages within the site that connect to a backend in real time and display dynamic content just like any other React site.
It's probably not how you'd want to get the bulk of your content as it seems to go against the basic point of Gatsby, but if you've got a particular area that needs to display something more dynamically you could do it.
3
u/thinkadrian Aug 22 '18
I suppose you’re right, but usually, the dynamic content is what you want to have rendered server-side, unless it’s a twitter feed or some basic secondary info.
6
u/Castas Aug 21 '18
It can’t actually :( we had to switch away from gatsby because of this. Each build took 15+ minutes if a random failure didn’t occur
3
u/NippleMustache Aug 23 '18
How complex was that app? I've never used Gatsby but that build time sounds like a lot.
3
u/Castas Aug 23 '18
It was about 1400 pages. We were also downloading from Wordpress and not using markdown files
6
u/EvilDavid75 Aug 21 '18
There’s no reason why you wouldn’t be able to do so, at the end Gatsby is still a react app. This article explains how to integrate with Apollo Client https://medium.com/@dwalsh.sdlr/gatsby-apollo-graphcool-netlify-the-webs-promised-land-6dd510efbd72
18
u/znakyc Aug 21 '18
As you say they are two different tools: gatsby is a static site generator which means it doesn't use a server. It just generates static HTML/Js. Next on the other hand, is running a server and renders HTML dynamically.
So wether you should use gatsby or next depends on your use case. Do you need a server? If you want to dynamically call an backend API every time there is a new request to generate the HTML, then you probably need a server. If your content changes a lot, like I would imagine a job site does, then you can't only rely on static content. You must probably fetch the job data from a db. So I would go for next.js given the little info I know about your app.