Throughout 2020 I've written a tonne of front-ends in both React (using Create-React-App) and Vue. I've also dabbled into Preact and Svelte.
Currently, next.js seems to be all the rage, but I'm struggling to see what makes it so compelling over plain, old React. Is server-side rendering really that good? To me, it seems like it causes more trouble that it solves.
Is next.js really that good? Is it worth making a switch?
Top comments (25)
I developed a site during the course of the last 9 months, and I have to say that’s great. I was a big fan of CRA, but Next.js DX is awesome.
I don’t personally overthink the SSR vs CSR portion of it, it all happens kinda naturally.
What parts of Next.js are you having issues with?
No issues in particular. I'm trying to understand when i should be choosing it over CRA ☺️
I’ll choose Next over CRA as Next does CSR. With Next, you already have SSR/SSG if you ever need them in the future.
CRA is for apps, NextJS is for sites.
How are you defining the two?
For easier understanding Gmail, Trello, Monday.Com are apps and CRA would be fine, but blogs and other things that need seo SSR is needed, but it does't matter I would choose Nextjs for Apps also because they support CSR and SSR
Thanks. That really helps.
Apps would typically be a single page and are simply apps which provide some functionality to the user whiles sites are typically multiple page and should use various optimizations for SEO
Yes, yes it is. 🤩
I’m in the process of migrating some of my Gatsby sites over to Next. Next provides a great dev experience, the file-based routing (including dynamic routes) just works, and the hybrid SSG and SSR out of the box builds are a marvel (not to mention the build caching).
What’s got you on the fence about it?
I think the fence is there because I'm just trying to understand the trade-offs, why it's so successful and what people like/don't about it.
Fair call. I hope you find the answers you’re looking for in your post comments. 👍
Merry Christmas! 🎄
To my limited understanding, next.js, like you mentioned is aimed at server side rendering. SSR improves SEO and indexing of your application significantly as crawlers can see the content. For client side rendered app the crawler will see an empty page.
Please correct me if I’m wrong 😅
Is there any way or tools to tell a react app is SEO-friendly?
For low to medium complexity projects google ligthouse is enough imho
on more enterprisy sites you usually have dedicated SEO team with dedicated tools
There are advantages depending on what you are wanting to achieve. Certainly if you are wanting better SEO, routing and rapid development straight out the box then Next is a pretty good choice for that. However like everything there are some downsides to be aware of and it is not suitable for everything.
What downsides are these? I've not heard of any!
Oh there are not many. Main thing is remembering it is opinionated and a number of choices have been made for you so you have to do things the Next way. I have not run into any specific issues personally but it is worth noting encase you want to change any core feature later. Personally when building a single page app then I find a regular react app easier/quicker/lighter. Certainly all experiences I've had with Next.js have been good ones.
For me,
If not for the folder structure and magic, I might as well go for Gatsby. Nuxt also has similar folder structure, if not more powerful.
CRA and Vue CLI don't aim for folder structure, nor prerendering, although it is not entirely impossible (with Webpack SPA plugin).
Hey, thanks for sharing your thoughts. By Pre-rendering do you mean server side? It's a great point about the magic - I've always found magic stuff to be a double edged sword though, so I'm a bit hesitant.
Is your experience mostly positive though?
Actually, prerendering actually means web browser snapshot; but it can also be done via SSR.
Next.js is SSR, but Webpack prerender plugin is Puppeteer snapshot.
I quite like the 'Image' abstracts lots of the lazy loading/image optimisation bits. But you can achieve that in HTML and vanilla js anyhow.
thenewstack.io/next-js-and-google-...
Is this built into next? Didn't know that - that's pretty neat.
Yess, nextjs.org/docs/api-reference/next...
Oh, neat
Next.js seems to be more lightweight with less boilerplate. The websites are also very fast too.