Nextjs Vs Cra

Posted on  by admin

What is React?

Create React App: whose apps are more performant? In this article, we will unpack that question – including SSR versus CSR – with some data, but first, we need to understand what exactly we are comparing.

Next.js is a React framework built by Zeit, and according to nextjs.org:. With Next.js, server rendering React applications has never been easier, no matter where your data is coming from.

Next.js also supports static exporting (and newly, incremental static regeneration), but for the purposes of this post, we are focused on that “server rendering” (SSR) capability mentioned above.

According to its Getting Started page:. Create React App is an officially supported way to create single-page React applications. Again, for the purposes of this post, we are paying attention to the term “single-page.”.

Introduction

Next.js is one way that you can leverage React to support server-side rendering (SSR). Likewise, Create React App is one way that you can leverage React to support client-side rendering (CSR).

Full visibility into production React apps

There are other frameworks out there when it comes to either choice, but what we are really comparing in this post is how each rendering strategy impacts web application performance.

Next.js vs. Create React App: understanding the frameworks

We just happen to be using two of the more popular frameworks out there to make that comparison. Let’s start our experiment with just one of many questions we can ask when comparing Next.js vs. Create React App: Does SSR improve application performance?

Which should you use for your React project and why?

Walmart Labs published a great post titled, “The Benefits of Server Side Rendering Over Client Side Rendering.” They also provide some excellent diagrams that demonstrate the fundamental difference between SSR vs. CSR performance.

Table of Contents

These diagrams postulate that SSR can deliver HTML to the browser faster than CSR can, so let’s make that our hypothesis: a web application built with SSR is more performant than one built with CSR.

(Note: this article calls out synchronous SSR as a bottleneck with renderToString. This is no an issue with React 16 and Fiber enhancements). The best way to test our hypothesis is by building two applications with identical functionality and UI. We want it to mimic a real-world application as much as possible, so we will set a few parameters.

The application must:. Fetch data from an API. Render a non-trivial amount of content. Carry some JavaScript weight. Software developers are typically spoiled with high-powered computers paired with blazingly fast office networks; we do not always experience our applications the same way our users do.

Conclusion

With that in mind, when optimizing for performance, it is important to consider both network and CPU limitations. Mobile devices generally have less processing power, so heavy JavaScript file parsing and expensive rendering can degrade performance.

React vs. Next.js: Library vs Framework

Fortunately, Chrome provides a dev tool called Lighthouse, which makes it easy for us to step into the shoes of our users and understand their experience. You can find this under the Audits tab in Chrome DevTools.

What is Next.js?

We will use the exact settings displayed above:. Applied Fast 3G, 4x CPU Slowdown. If you live in Northern California and you are on servers living in AWS us-west-1 (N. California) all day, you are not experiencing your application the same way as your users in other parts of the United States, nor other parts of the world.

The experiment: Next.js vs. Create React App

So, for the purposes of this test, the demo apps and the API were deployed to Sydney, Australia (specifically, Zeit’s syd1 region).

Measure performance in production environments

The client’s browser will be accessing the applications from Boulder, CO, USA. The distance between Boulder and Sydney is 8,318 mi (13,386 km). Look at what that means for data fetching between these two applications.

Next.js vs. React: How do they compare?

The code for the two apps is available in my GitHub. Here are the applications:.

Next.js vs. Create React: performance results

All of the code is in a monorepo:. /cra contains the Create React App version of the application. /nextjs contains the Next.js version.

What is Create-React-App

/api contains a mock API that both applications use. The UI appears identical:. And the JSX is nearly identical:. We will get to what the ThemeProvider and other components are in a moment.

Is NextJS better than React?

The code differs in how the data is fetched from the API, however:. getInitialProps is a special function that Next.js uses to populate the initial data for a page in Next.js.

Best Scenarios for using Create React App

You can learn more about fetching data with Next.js in their docs. Going back to our original test parameters, we are trying to test with an application that at least somewhat resembles one we would ship to production.

The ThemeProvider, PrimaryNav, etc. all come from a UI component library called Mineral UI. We are also pulling in Moment.js because it is a larger dependency that adds some JavaScript weight and also some additional processing that needs to occur when rendering the component tree.