Next.js is Great, fur real.

Love at First Site (had to)

I have always wanted a React.js framework. I love making awesome user interfaces with React and I thought a framework would make that experience better. I essentially wanted more bells and whistles and I found them. Queue Next.js.

In this post I am not explaining every aspect of Next.js, that information is here. I will talk about what gets me excited about Next.js, though.

Search Engine Optimization

‘You don’t know what you don’t know.’ Cringy saying right? So what I didn’t know was the downstream effects of how React renders site pages: client-side rendering. So, if a user tries to access a specific page on a React site, they will receive a minimal HTML file with Javascript files. The browser then loads the content from the Javascript files into the HTML file. Because the client only has to query the server initially, navigation between pages is fast and at no expense to the server. This makes the website feel fast, which is why I love React.

Unfortunately, I found out sending the minimal HTML file is possibly an issue for search engine optimization (SEO). Search engines index sites for rankings (first, second, third page results) with web crawling bots. For instance, a Google bot’s first pass to index a site focuses on consuming content within HTML files. So as we just talked about, with client-side rendering, they won’t be consuming anything. Although, a bot does a second pass for site indexing, and is supposed to reach the content loaded from the javascript files, it is debated if it is effective.

Pre-Rendering HTML Pages for SEO and Performance

By default, Next.js pre-renders every page. So, in advance of the client receiving an HTML file, Next has already generated it full of content. You can either statically generate the HTML file at build time or when a client makes a request to the server. Either way, the client will receive content within an HTML file, which makes it fully available to a search engine bot.

Statically generating HTML files at build time also allows for a very fast user experience. The server doesn’t need to be queried and no content needs to be loaded in the HTML file. Even if the site pages rely on external data, Next has special serverless functions that will generate the data needed at build time. It will also generate the content for dynamic paths (e.g., blog/post/1, blog/post/2) at build time as well.

You are also not tied to pre-rendering and are able to use both server-side rendering and client-side rendering. Right now I am thinking of a use case for my school project, where I would want to hybrid the rendering options. For a marketplace-like app, I would pre-render statically generated sale post pages, but client-side render sale category pages. I would do this for the category pages because a user will populate different sale posts based off of many search criteria. I can get speed and SEO for all sale pages and I get to minimize use of my server with sale category pages by having the client’s browser do the heaving lifting.

File Based System Router

How have you handled site routing for your React.js Apps? I have always used React-Router, which would end up looking something like this:

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import App from "./App";
import Hotdogs from "./routes/hotdogs";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="hotdogs" element={<Hotdogs />} />
    </Routes>
  </BrowserRouter>,
  rootElement
);

https://reactrouter.com/docs/en/v6/getting-started/tutorial

Yea, Next handles all this for you. And it does it in a manner that helps you organize the structure of your code base. If you want to have a specific route to a page, you simply create a Javascript file under the pages directory that was created at project install. Inside the Javascript file you return a react component and THAT is where the magic happens 🦄.

In sum..

I had a fantastic experience creating this site with Next.js. I optimized the site for search engines, achieved an amazing performance rating, and thoroughly enjoyed the out-of-the-box routing feature. Hope this post was helpful; until next time.

– The Coding Hotdog