DEV Community

Cover image for Next.js - the future of React?

Next.js - the future of React?

Artur Siery on July 24, 2020

React and Angular are probably the most popular, competing frameworks right now. They are being used in thousands of commercial and non-commercial ...
Collapse
 
shinabr2 profile image
ShinaBR2

I have worked with NextJS and Redux, Saga, etc for years. And to be honest, the future of React is never be NextJS. It should be Static Site Generator (SSG) like Gatsby instead. I can give you lots of reasone, but the most important thing is: SSG makes frontend developer totally independent to backend/server. Frontend developers nowadays don't just only need good framework, they also need good Development Experience.
Anyway, thanks for your passionate post.

Collapse
 
dotintegral profile image
Artur Siery

A bit on a tangent here - It's funny how the technology comes full circle. Back in a day all we had was static pages (although not generated). Then we had server side pages, finally SPA and now we go back to static pages :-)

Collapse
 
shinabr2 profile image
ShinaBR2

Yes agree :) but frontend development now is very interesting journey. I feel lucky when I have faced the time working with static pages from scratch, only with HTML, JS, CSS till now. That's a long but very fun adventure.

Collapse
 
allangalera profile image
Allan Galera

But nextjs provides SSG capabilities as well. I just think that gatsby locking you to graphql not a good thing :(

Collapse
 
lucianohgo profile image
Luciano H. Gomes

Next.JS doesn't lock you with dynamic rendering and Gatsby doesn't lock you to GraphQL (gatsbyjs.org/docs/using-gatsby-wit...).

SSG is good for 99% of the cases, in some cases you're better off with a dynamic rendering though, i.e. if your data changes a lot above the fold AND you need search indexing on that data frequently. Some notable examples are product catalogs that change a lot, like real estate. Product pages (if you have over 1000000 product pages you won't do them all in build time, some form of dynamic rendering will be needed even if on the spot snapshot rendering + caching for some time). We need to know when to use which.

Thread Thread
 
shinabr2 profile image
ShinaBR2

Yeah correct, but Gatsby team is trying to improve for that case with gatsby cloud.

Thread Thread
 
allangalera profile image
Allan Galera

I mean...that, for me, gatsby is more opinionated than NextJS. I just think it's easier to configure NextJs than to do that with Gatsby. Now (jokes aside) both try to lock you in their cloud service. I find serverless component the best way to do it on AWS for NextJS outsite Vercel service. But that is because I lack a little bit of knowladge to set up that structure for myself :(

Thread Thread
 
shinabr2 profile image
ShinaBR2

I see, everything has its own pros and cons. If you familiar with NextJs, just stick with it as long as it resolves problems :D

Thread Thread
 
allangalera profile image
Allan Galera

At the end we are all stating our opinions :) but it's good to see how others see :) nice talk 🙂

Thread Thread
 
shinabr2 profile image
ShinaBR2

Nice :)

Collapse
 
serializator profile image
Julian

"totally independent to backend/server", could you elaborate on this? Because as I see it with SSR, React would still perform the same requests as with CSR but before sending it to the client?

I'd love to hear! 😉

Collapse
 
shinabr2 profile image
ShinaBR2 • Edited

Sure. NextJS need A WEB SEVER for it, usually Express. But when working with Gatsby, you totally forget about Express or any web server. A real use case is testing frontend on production. With NextJS, you still need to deploy it somewhere to test the production, but with Gatsby, you can totally test production on your server. That sounds like a true "serverless" approach. And Gatsby makes the development experience from development to deployment seamlessly.
Any feedback will be highly appreciated :)

Thread Thread
 
taylorbeeston profile image
Taylor Beeston

Actually, you can use next export and just host your app anywhere that serves static files. See nextjs.org/docs/advanced-features/...

Thread Thread
 
shinabr2 profile image
ShinaBR2

Yes that's the new NextJS feature. But for me, it sounds like they realized that the "static file generator" should be the future, that's why they introduced it.

Thread Thread
 
taylorbeeston profile image
Taylor Beeston

Most of their docs make it seem that way, recommending SSG in most use cases. I just mentioned it because you said that Next forces you to use a backend, but as long as you only use SSG you're good to host your site on e.g. GitHub Pages

Thread Thread
 
shinabr2 profile image
ShinaBR2

Thank you for your reply. That's really a good news for NextJS fan. Let see for a while how both NextJS and SSG grow.

Collapse
 
zilti_500 profile image
Daniel Ziltener

If you use a SSG, you don't need something like React. Because they are complete opposites of each other.

Collapse
 
shinabr2 profile image
ShinaBR2

Yes but SSG I mean, a higher level of frontend development. You can choose whatever you want.

Collapse
 
lucasfrutig0 profile image
lucasfrutig0

obviously scientist

Collapse
 
dotintegral profile image
Artur Siery

The convention what is considered a framework is really blurry. I remember working in Java more then a decade ago. Everything there was a framework, including a library for making pretty URLs (not even a full routing) was considered a framework. So that's why I wrote, that people can consider it a framework or not.

Collapse
 
stereoplegic profile image
Mike Bybee • Edited

Next is awesome, but I absolutely HATE that the Next Router is so tightly embedded. I know it's not the same, but it feels too much like RoR forcing Active Record on its devs. As someone who does a great deal of single codebase dev with React Native/RN Web particularly with React Router (web and native) instead of React Navigation, it makes this particularly frustrating.

Compare, for example, how easy it is to integrate React Router with Gatsby. I know, SSG vs. SSR (with optional SSG), but still.

Shout out to After.js for shaking loose from Next Router and basing on React Router instead... Now if it would just provide static site gen like Next.

Collapse
 
dotintegral profile image
Artur Siery

Agree, the routing is quite strange. I guess I never had an issue with it, but I can understand that it can be not versatile enough for some cases.

Collapse
 
stereoplegic profile image
Mike Bybee

It's not bad, it's just... Rigid.

Collapse
 
kenbellows profile image
Ken Bellows

React is very often referred to as a framework, and IMO it fits that description very well. The library-vs-framework argument is as old as software, but the best test I've ever heard (can't remember where now) is this: if you mostly call its functions, it's a library; if it mostly calls your functions, it's a framework. I would argue that React more closely fits the latter definition, while e.g. Lodash and even jQuery more closely fit the former.

I don't know of any definition that says that a framework must have view, routing, state, and auth, though I'd be interested to read about that perspective (genuinely 🙂). With that said, React does at this point have state management built in with the useState and useContext hooks. It's not a particularly advanced state system, but it's there, and I've built entire fully functioning applications in React with nothing more than those. And while it's true that it doesn't ship with routing out of the box, React Router is practically a part of the family with how popular it is; and moreover I don't think a complex router like that is necessary for all projects, and the ability to plug in different routing systems should not lower the status of the thing they're plugging into. And regarding auth... That's usually a server side thing, no? Do other UI frameworks have auth as a major component? (Honest question!)

Collapse
 
stereoplegic profile image
Mike Bybee

@dotintegral not to crap on your post. It's great. Sincerely.

Collapse
 
dotintegral profile image
Artur Siery • Edited

No problem at all! It's what we do here, share opinions in order to figure out the best solutions for ourselves :-)

Collapse
 
stereoplegic profile image
Mike Bybee

Personally, one of the things that sold me on React was that it was a view library (though with context, that's not entirely true anymore) rather than a "throw the whole kitchen sink at everything" complete MVC framework like Angular, while still keeping me from reinventing far more wheels than vanilla JS or smaller libraries, and with corporate backing and a massive community like Angular, and tons of community bits and pieces I could add on only as needed to further avoid reinventing wheels.

I can't fault Next for being opinionated, as many of my solutions are extremely opinionated. It's just that Next's opinions get in the way of many of mine.

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Next.js is definitely awesome. With the latest updates and features added it takes the cake over any option currently out there. Like you mentioned, it has its downsides but I think the great majority are positive aspects like on a 80/20 ratio.

Collapse
 
cullophid profile image
Andreas Møller

React is a state management library, and in my opinion by far the best one.

Collapse
 
sebastiandg7 profile image
Sebastián Duque G

What?

Collapse
 
cullophid profile image
Andreas Møller

What what?

Collapse
 
dbredvick profile image
drew.tech

Hey, great article.

Wanted to point out that Next does support CSS-in-JS out of the box with Styled JSX: nextjs.org/blog/styling-next-with-...

Collapse
 
dotintegral profile image
Artur Siery

Thanks! I've missed that one. I think I focused only on styled-components and JSS and forgot about Styled JSX.

Collapse
 
nardove profile image
Ricardo Sanchez

Thank you for the article, very informative. I spotted a typo. Last work on the Server Side Rendering paragraph -> 'quite quckly'

Collapse
 
dotintegral profile image
Artur Siery

Thanks!