How Next.js improve SEO

There are a few ways to build modern applications, two of the most common applications include single-page applications and server-rendered applications.

Single-page applications can be pretty useful for applications that will require better performance. Although Google has made some updates on how their crawler processes single-page applications, we still have a lack of SEO results. Server-side rendered applications can achieve better SEO results in search engines and still have a pretty decent performance.

The release of some awesome JavaScript frameworks, such as Next and Gatsby, has lead to more server-side applications being made. Let’s see a few reasons why single-page applications are not the best choice for some cases, especially for applications that are going to depend heavily on SEO.

The problem with single-page applications (SPA)

Something that you should consider before choosing to build single-page applications or server-side rendered applications is the content that you want to show.

A single-page application (SPA), is an application that is not served from a new HTML page every time new content should be rendered, but it’s dynamically generated by JavaScript manipulating the DOM. Since there’s no need to load a new HTML page every time something needs to change, what’s the problem with SEO in SPA?

The problem with SEO in SPA is that the application cannot be properly indexed by search engines, which is different from server-side rendered applications. A SPA serves only an initial HTML file, so the search engines cannot index the content because in a single-page application you have the JavaScript generating new HTML every time something changes. Although SPAs have a lot of other advantages such as performance, saving time and bandwidth, better responsiveness on mobile devices, increased performance in slower internet connections, etc.

With server-side rendered applications, especially with Next.js, you can create a performant application and have good SEO at the same time.

Performance

Visitors don’t want to wait an eternity for your page to load. Performance should be the main concern when building an app. Performance is actually a crucial factor for SEO.

Search engines, especially Google, use the First Contentful Paint (FCP) of your page as a crucial performance metric. FCP metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen. A page with a poor First Contentful Paint performance will result in a bad SEO result.

You can use Next.js to measure some metrics such as FCP or LCP (Largest Contentful Paint). All you have to do is create a custom App component and define a function called reportWebVitals:

// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric);
}

The reportWebVitals function will be triggered when the final values of any of the metrics have finished on the page.

You can find out more about measuring performance in Next.js applications here. Here you can find a list of points that you should improve in order to get a nice FCP result.