• NextJS vs. NuxtJS vs. GatsbyJS
  • Original author: Mr Herath
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: z0gSh1u
  • Proofreader: JohnieXu, Nia3y

NextJS vs. NuxtJS vs. GatsbyJS

The so-called server-side rendering is the process of rendering static HTML and CSS by putting the rendering process of JavaScript framework originally running on the client side on the server.

Why is it important?

We all want to speed up the loading of websites — and server-side rendering is a tool to speed up page rendering. The key step for a browser to render a page is to accept the key data sent by the server and render it into a visual page. If we can distribute these key resources to the browser faster, the page can be rendered and rendered to the user faster.

How server-side rendering works

The speed at which the browser renders your application depends on how you build it. The first thing the browser receives is an HTML document. Documents include references to various resources — such as images, CSS, and JavaScript code. As the browser parses the HTML document, it knows to fetch and download these resources. So, even if the browser has downloaded the HTML, it will not start rendering the page until the CSS has been parsed.

Once the CSS parsing is complete, the browser renders the page further. That is, all you need is HTML and CSS and the browser can render the page. We all know that browsers are good at this, so the process is fast.

Now, the final step is JavaScript. After the HTML document has been parsed, the browser will download your JavaScript file. If the file is large, or if the network is poor, the download will take a long time and the browser will have to parse the JavaScript. On devices with poor hardware, this time consumption can be significant. Also, if your first rendering relies on JavaScript, you’ll see slow loading multiple times. JavaScript should be seen as an enhancement to HTML and CSS because it can be deferred for loading. However, the situation is not always so simple. Some sites require functionality that relies heavily on JavaScript — such sites use a JavaScript framework.

Server side rendering process

The rendering process of the JavaScript framework mentioned above can be optimized, for example, by completing the rendering process in advance on the server and delivering the resulting HTML to the browser.

So, the user can almost immediately see the HTML page that you generated in advance on the server, while the JavaScript starts executing in the background. This doesn’t necessarily make your page load faster than the non-server rendered version, but it does give the user something to see while the JavaScript is still downloading in the background — which is good.

Survey and statistics

Before we go any further, let’s take a look at some statistics from different sites.

The condition of the JavaScript

According to a survey of JavaScript, Next ranked ahead of Nuxt and Gatsby. In this article, we won’t consider Express, etc., because we’ll focus only on JavaScript frameworks for server-side rendering.

Based on the statistics below, we can see how much attention users are paying to JavaScript related backend frameworks. It can be seen that NextJS has the highest user usage and interest compared with NuxtJS and GatsbyJS.

GitHub repository statistics

Based on these GitHub repositories, we can see that developers are increasingly attracted to NextJS — whether it’s a Watch, Fork, or Star count, NextJS is higher. But Gatsby is almost as popular among developers.

Why NextJS?

Next is one of the fast growing React frameworks, especially for server-side rendering. The authors call NextJS a lightweight framework. I personally think it’s more appropriate to think of it as a platform or a starting template.

The advantages of NextJS

  • By default, it uses Webpack support for hot overloading on both the client and server sides. Babel also defaults to using preset such as ENV or JSX to compile your code.
  • Everything is rendered on the server side by default.
  • You can write a slightly more sophisticated React app in four minutes. Plus, there’s no problem learning Next — there’s a dedicated learning page on the official website. You can also check out its GitHub page.
  • You just need to create a new JavaScript file in a specific directory to create the route. Of course, you can also customize routes.
  • Node is used on the server side, so you can do whatever you want, like Express.
  • It automatically splits your application based on import — unnecessary code won’t be loaded.
  • Getting the data is extremely simple.
  • Imagine you want to learn NextJS — what can you do with it? If you’re a freelance developer, you can start a new project quickly; NextJS can also be useful if you’re building a potentially large project.
  • You can configure anything you need — from page initialization and routing, to Webpack and Babel configuration.
  • NextJS applications can be deployed in any environment that supports Node.
  • Search engine optimization (SEO) is completely handled for you.
  • Overall, NextJS does a lot for you.

Where NextJS shouldn’t be used

If you’re building a simple application, I suspect NextJS will overdo it.

If you’re going to integrate a server-side application into your NextJS application, I don’t recommend you start right away because you can’t — it’s too much work.

Why NuxtJS?

NuxtJS is a high-level framework built on top of VueJS to help you build Vue applications for production environments.

The advantages of NuxtJS

  • Building a Vue application that can be used in a production environment is complex. Nuxt not only preconfigures Vuex, Vue Router, and VUE-Meta, but also smartly preconfigures your project using best practices based on well-researched research. Vue doesn’t give you that out of the box.
  • Creating a Nuxt application is simple. Nuxt scaffolding will ask you which libraries to install, such as ESLint, or a CSS framework to use.
  • Vue’s default project structure puts resource and component files in your source directory, while Nuxt puts your application’s pages, views, routes, and other folders in a separate, best practice based location.
  • Since everything has its place, it’s easy to move between Nuxt applications and get developers up and running as quickly as possible.
  • In large Vue projects, the routing configuration can be very long. With Nuxt, you simply place your single-file component in the page directory and Nuxt automatically generates routes with zero configuration.
  • Vue apps are not SEO friendly, and you want some of your app’s pages to be indexed properly by search engines to make them easier to find. One of the best solutions is to pre-render your pages on the server side, but configuring them yourself can be tricky. Nuxt is already preset to generate your application on the server side with routing configuration, making it easier to add SEO-related tags.

Where NuxtJS should not be used

Using Nuxt can be challenging if you are building your application using custom libraries.

If you are using Nuxt for the first time and your Vue application development schedule is tight, you may encounter some problems.

App debugging can be painful — a common problem in the developer community.

Why GatsbyJS?

Gatsby is also a React based graphQL-driven static site generator. To put it more simply, Gatsby is a static site generator. What does that mean? Static sites mean that the things we put on the server are static HTML files generated by Gatsby. This is different from the way many sites work.

It is important to point out that static sites do not mean non-interactive and non-dynamic. We can load JavaScript into HTML files on the Gatsby server, initiate API requests, interact, build rich, large websites, etc., even though they are static.

The advantages of GatsbyJS

  • Gatsby uses GraphQL — we can import data from anywhere into the Gatsby site, which is really exciting.
  • We can use Markdown files from the database to access common CMS such as WordPress or other Headless CMS. However, Gatsby doesn’t process data for us — it just takes the data pulled into Gastby and generates sites from it.
  • Gatsby also uses React and CSS, which you should be familiar with. React is used in all templates and CSS styles. That is, GraphQL pulls our data and React processes which templates and CSS styles should be used. Finally, everything is exported to the static Gatsby site.
  • Gatsby is based on a plug-in architecture — a good one since we’re building a static site.
  • Gatsby had a strong team, an open source community, and well-documented. It’s an open source project, so there’s a lot of potential to grow from community contributions.

Where GatsbyJS should not be used

If you’re going to use Gatsby with WordPress, you’ll need to switch to many of WordPress’s built-in features — you can’t use custom layouts for themes, for example.

Since the Gatsby site is static, each change requires a new deployment.

conclusion

Based on the above pros and cons and survey, we can conclude that NextJS is the best server-side rendering framework for the future. However, if we look at the future of front-end development, we can see that Vue is also doing well in actual project development. Based on the above factors, I recommend that you learn and use NextJS.

Thanks for reading.

resources

  • 2019.stateofjs.com/back-end/
  • Github.com/vercel/next…
  • Github.com/nuxt/nuxt.j…
  • Github.com/gatsbyjs/ga…

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.