Next.js VS Create-React-App

If you are into web development, you must have already heard about the famous JavaScript library- React. React has come a long way since its first introduction. Given the vast number of features added and many other frameworks that have been built using React as its base, it becomes very mind-boggling when one has to choose which path one will stride on.

The developer community is getting updated everyday. More often than not, you must have thought why you should use a certain library or framework.

This article will give you a side by side comparison of Create-React-App and the relatively new Next.js and when and why you should use one of these. If you are confused about it, this article might just be the one for you.

Who’s gonna win? Scroll down to find out. (Image by IAF)

Let me introduce them first:-

Next.js is a widely-used framework for building React applications that offer server-side rendering, automatic code-splitting, static exporting options, and easy production builds. It also relieves a lot of the general headaches involved with creating production-ready React applications

Create React App is an officially supported way to create single-page React applications. It supports client-side rendering. You don’t need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

If you have gone through the introduction carefully, you must have noticed the two terms - server-side rendering (SSR) and client-side rendering (CSR). This is one area where not only beginners but also experienced developers become a little confused. So, don’t beat yourself up if all of it seems out of bounds. It will come to you gradually!

Let’s explore what SSR and CSR is.

SSR vs CSR

Server-side rendering. (Image by Picuki)

In server-side rendering, when a user makes a request to a web page, the server prepares an HTML page by fetching user-specific data and sends it to the user’s machine over the internet. The browser then analyses the content and displays the page. This entire process of fetching data from the database, creating an HTML page and sending it to client happens in mere milliseconds.

In client-side rendering, the content is rendered using JavaScript. So instead of getting all the content from the HTML document itself, a bare-bones HTML document with a JavaScript file in initial loading itself is received, which renders the rest of the site using the browser.

Client-side rendering. (Image by Picuki)

With client-side rendering:-

• The initial page load is a bit slow.
• However, after that, every subsequent page load is very fast.
• Communication with server happens only for getting the run-time data.
• There is no need to reload the entire UI after every call to the server.
• The client-side framework manages to update UI with changed data by re-rendering only that particular DOM element.

Next.js which offers SSR, provides:-

• Better SEO, about which we will discuss in detail later.
• All of the HTML content is present in the source code which means the search engine can request, crawl and index it immediately, resulting in faster time to actually appearing and ranking in search results.
• However the repetitive server requests makes subsequent page loads slower with respect to CSR.

Thus, comparing the two does not necessarily mean classifying them as black and white.

Routing

A very compelling feature of Next.js is that it does not require much work to set up routing in your application. Next.js provides it by default by providing separate folders.

Go to your directory where you want to create a Next.js app and run the following code:-

npx create-next-app

It will then ask you to name your project and select a blank template or the example from the Next.js repo

✔ What is your project named? … demoproject
? Pick a template › - Use arrow-keys. Return to submit.
❯  Default starter app
Example from the Next.js repo

When you have selected the default starter app, the project gets created and you can go into your code to look at the folder structure.

cd demoproject

Folder Structure:-

pages/api/hello.js
     /index.js

Static routing:-

• There is a folder named page which contains a subfolder- api and a file named index.js.
• Create a new file with .js extension under the pages folder. It will create a new route by the name of that file.

This makes your work much more easier than the conventional Create-React-App where you need to install the react-router-dom to help you with routing. It also involves writing extra code to set up routing in your application.

Dynamic routing:-

You can also set up dynamic routes very easily. Add brackets to a page ([param]) to create a dynamic route.

pages/post/[pid].js //pid is any dynamic post id. 

Code splitting

What is code splitting?

Code splitting is one of the most compelling features of webpack. The JavaScript bundle is split to only send the code needed for the initial route when the user loads an application. This minimizes the amount of script that needs to be parsed and compiled, which results in faster page load times.

Code Splitting with React Router:-

// route.js
/* Import the components */
import Home from "./containers/Home";
import Posts from "./containers/Posts";
import NotFound from "./containers/NotFound";

/* Use components to define routes */
export default () =>
  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/posts/:id" exact component={Posts} />
    <Route component={NotFound} />
  </Switch>;

When we look at the above code in CRA, all the routes are loaded at first. What is the disadvantage of this?

• It takes more time for the app to load when there are multiple routes.
• It increases the size of the JavaScript bundle.

To overcome this, we use dynamic imports through the help of React.Lazy and React.Suspense. This provides the code splitting feature by allowing lazy loading, i.e. the route will be called and loaded only when the user tries to go to that particular route.

After modification:-

// route.js
const Home = React.lazy(() => import('./containers/Home'));
const Home = React.lazy(() => import('./containers/Posts'));
const Home = React.lazy(() => import('./containers/NotFound'));
<React.Suspense fallback={<div>Loading please wait</div>}>
  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/posts/:id" exact component={Posts} />
    <Route component={NotFound} />
  </Switch>
</React.Suspense>

How does Next.js have an upper hand here?

Next.js by its default design of having separate routes provides us automatic code splitting without the developer not having to going through the process of deliberately implementing it.

SEO

Let’s get a brief idea about what SEO is, in case you are not acquainted with the term…

Search engine optimization(SEO) is the process of growing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine. We can optimise SEO of our deployed sites by the help of meta tags and dynamic meta tags.

Meta tags & Dynamic meta tags

Meta tags provide information about the webpage in the HTML of the document. This information is called “metadata” and while it is not displayed on the page itself, it can be read by search engines and web crawlers. Dynamic meta tags help provide information about separate pages within the same web application and thus provides crawlers meta data of every individual page in a certain website and makes it more accessible to the user, thus increasing the number of visits.

Next.js through the help of its server-side rendering feature already provides us with better SEO. Create-React-App can also provide us with SSR, but with a lot of workarounds.

One of the most important features of Next.js is its ability to provide dynamic meta tags for better SEO purposes without the help of any external library.

Next.js

// Homepage.js
import Head from 'next/head'

function Homepage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0,          width=device-width" />
      </Head>
      <p>Hello user!</p>
    </div>
  )
}

export default Homepage

Thus, we can provide dynamic meta tags for better SEO purposes without having to write too much code.

Create-React-App

CRA allows us to provide dynamic meta tags with the help of React Helmet or React Snap, thus, requiring the use of separate libraries unlike Next.js.

Let’s have a MetaComponent that contains the meta tags. To it, the meta data of individual pages can be passed as props.

// MetaComponent.js
<>
   <Helmet>
        <title> { title } </title>
        <meta name="description" content = { description } />
        <meta name = "keywords" content = { keywords } />
    </Helmet>
    <div className="layout">
        { children }           
    </div>
</>

To provide better SEO in the browser, we wrap our component with this MetaComponent and send the necessary meta data to it as props:-

<MetaComponent title = "Homepage" description = "important data" keywords= "seo, tags, for, current, page">
   <Homepage />
</MetaComponent>

Thus, CRA involves having to write more code for the same feature.

Conclusion

Certain issues:-

For CRA the size of the largest initial JavaScript bundle is important during the first load for both the display of all content and for the application becoming interactive.

For Next.js, during the first load, the size of the largest initial JavaScript bundle is only important for the application becoming interactive; the display of all content is mostly unaffected by it.

Thus, for both of them, the largest initial bundle has to be minimised for better interaction which is achieved through code splitting and thus it is easier for beginners to use Next.js.

When to use CRA?

• First and foremost, use CRA when its an SPA with only the frontend(no server)(Only to make your work easier).
• There’s no bundled react library with CRA, or i18n, state management or other advanced features, so it’s completely up to the developer to pick the right library to include in its project.
• This makes the bootstrapped project less opinionated and ready to experiment with any React library or quickly prototype a basic application, thus making it more flexible.
• If you are starting out and you want to learn everything under the hood instead of being served on the spoon, take up CRA.

It’s more like whether you would use Python or Java or C++ as your first programming language. While Python provides a lot of things ready made for you through its libraries, Java or C++ or C asks you to implement them completely on your own. Don’t you feel much more knowledgeable when you get to know under the hood? :)

When to use Next.js?

• If your plan of action includes both a server and a client side.
• If you want to get a more optimised website with respect to SEO.

Next.js has everything we like about React + SSR, and with minimal configuration.

Thanks for reading!!

These are my opinions. You are always welcome to have your own and cross question me. After all, that’s the essence of learning!

<HappyLearning/>