- 5 Reasons to Switch from React to nex.js
- Original article by Anuragkanoria
- Translation from: The Gold Project
- This article is permalink: github.com/xitu/gold-m…
- Translator: Zz zhaojin
- Proofreader: Kim Yang, Cyberhan123
Five reasons to switch from React to Nex.js
Choosing the wrong frame can be a terrible nightmare.
That was in 2020, at the beginning of the first pandemic lockdown. Like people all over the world, I found myself with unplanned spare time.
I decided to use the free time to learn new technology and ended up learning React and upgrading my Node.js skills.
I built a blogging platform using React for the front end and the Node.js server for the back end. The platform has all the features you would expect from a standard application.
-
Multiple account login options (use Google, Twitter, etc.)
-
Rich editor, can write beautiful blog.
-
Ability to create drafts and edit published articles.
-
Analysis and management panel.
In the process, I learned some valuable lessons about Web development.
Everything seems fine from the user’s point of view, but for developers, maintaining project code is a nightmare.
That’s when I realized what the catchphrase “React framework for production” really meant.
I switched from React to Nex.js for the following five reasons.
1. React is not SEO friendly
Every blog or productable site needs to be optimized (SEO) for search engines, except for something like control panels or user-set sites.
It’s been almost a year, and most of my React site blogs still don’t show up on Google searches, even though I specialize in urls and other tools.
Since then, I’ve tried to optimize the React website using a library like React Helmet.
React is not SEO friendly because it doesn’t render on the server side. In contrast, the main advantage of Nex.js is that it supports server-side rendering.
A good SEO solution can drive effective traffic, and nex.js seems to be the solution to ensure this.
However, I would like to point out that the client-side ReactJS application is not uncrawlable by Google Bots. They can be crawlable, but the SEO effect is not as good as what next-.js offers.
If you want to learn more about rendering and SEO in JavaScript applications, check out my blog, where I’ve covered these topics in plain language. After set up multiple websites primary JavaScript web applications written in SEO guide: the following is I learned about the content of the effective flow and SEO — JavaScript. Plainenglish. IO
2. AdSense audit questions
React creates a single page application (SPA), which is essentially a single page that only needs to be loaded once.
Data is loaded dynamically as you browse the page and jump to other pages.
While single-page applications are known for being responsive and offering native applications, they do have drawbacks.
When I tried using Google’s AdSense to monetize websites, I found a downside.
Instead of simply checking the code they asked me to put in the index.html file, AdSense, more surprisingly, couldn’t find anything on the site at all.
This is because blogs load dynamically, and AdSense needs to see the real content before approving the site to display ads.
A simple Google search revealed that this is a common problem with many single-page application sites.
The root cause of this problem is the lack of proper server-side rendering support, and nex.js can easily fix it.
3. Easier navigation
Understanding React navigation and routing is a big learning cost, especially when the person previously used a framework like Vue (like me).
The React route uses a dependency package called React-router-dom. The code looks complicated. Here is an example of React routing.
Since my site is feature-rich, it has a large number of pages, from the preset blog and registration page to the FAQ and Terms of Service page.
Next. Js simplifies the routing of all these pages. It provides a routing navigation based on the file system, based on the concept of a page, which is basically a React component.
Adding these page files to the Pages directory automatically makes it a route.
This greatly simplifies routing configuration, and as a developer transitioning from Vue and Nuxt, it seems easy to accept.
You can find more information here.
4. Support API routing
Nex.js has built-in support for API routing, which allows you to quickly create API endpoints using known filesystems.
Any file you put in the Pages/API directory will be treated as an API endpoint (as a Serverless feature of Node.js).
This is a very useful feature if you need to run some server-side functionality, as these endpoints are not part of the client dependency package.
For example, if you have an input form on your website, you can send a POST request to an API endpoint, which will validate the input and store the data in a database.
This basically lets you create serverless functionality, which enabled me to combine Node.js and React code into a single next-js application.
The front-end API routing created by nex.js is done by Next using its own data.
If you’re going to create a mobile application and get data from the server, it can help.
5. Built-in image components
As I mentioned earlier, I built a blog site, and any blog needs to have media content as well as text.
Looking at the blog itself in isolation, in addition to the written content, it has some pictures.
According to the Next. Js documentation, images make up 50% of a web page’s content.
Usually, there is a limit on the size of media files, such as 25 MB.
In addition, some loaded images are not in the user’s viewport, that is, the user must scroll down to see the image.
Therefore, many factors, such as lazy loading, compression, size, and format, must be considered.
Next. Js solves all of these problems with an image component and automatic image optimization, which replaces HTML’s tag.
By using it, images are loaded lazily by default, and the browser ADAPTS the size of the image, leaving empty space before the image loads. This avoids random jumps in images and improves the user experience.
In addition, the Next/Image component of nex.js uses the latest formats, such as WebP, which is 30% lighter than its JPEG counterpart, to shrink the image as needed.
In addition, these optimizations are done on demand, so build times are not affected, and images from the outside are also optimised.
This paper summarizes
React is the most popular framework out there, and it’s unquestionably a must-learn for every Web developer.
However, that doesn’t mean React is for every type of site. Like any other framework, React has its drawbacks.
Built on Top of React, Nex.js aims to provide solutions to some of React’s problems, while also promoting application development by introducing some modern built-in solutions.
Switching from React to Next is doable, but if you’re just starting out, be wise to choose Next over React.
It should be noted that it is also not advisable to use nex.js in every project and discard React entirely.
Every website and application is built with a specific purpose and goal, which can make a difference when choosing the right framework and libraries.
Unfortunately, in my case, I found out after building the site entirely with React that I should have used nex.js instead of React because of that.
I hope you can learn something from my mistakes and choose a suitable framework.
Thanks for reading!
For more, visit plainenglish. IO.
If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.