Search Engine Optimization (SEO)

SEO. You've heard the term over and over again. SEO is crucial to your online success. Because of this, there is no way around it. You have to engage in SEO if you want traffic to your application. Next.js is built with SEO in mind.

How Next.js can help you with SEO

There are two main categories of SEO: On-page SEO and off-page SEO.

  • On-page SEO is often referred to as making your site or application search engine friendly. Next.js can help you with this type of SEO.
  • Off-page SEO includes creating backlinks to your site or creating a social media presence which Next.js can not help you with.

Why server-side rendering is good for SEO

In the last lesson, I showed you how server-side rendering and client-side rendering flowed. This flow of information from the client to and from the server has huge impacts on the way Google and other search engines will index your site. When your site uses server-side rendering, you can return all of the information to the browser in its entirety. This is important because the search engine crawls the page at that moment. If information is not there and your client is still trying to process JS, as well as get data from APIs, the information will be loaded on to the page after the crawl takes place. Even one second of client-side rendering can cost you on-page SEO value.

When your application will get crawled with Next.js

Your application will get crawled and indexed as soon as the client receives an HTML document from the server. With Next.js, you can have all the information pre-loaded so the search engine robot sees all the information.

Why Server-Side Rendering is Good for SEO
Why Server-Side Rendering is Good for SEO

When your application will get crawled with only React

Your application will get crawled and indexed as soon as the client receives an HTML document from the server. With React, it only sees a very basic HTML document. Only a short moment later, the client is able to generate all of the information and load it for the user to see. Unfortunately, even though all the information is there at this point, the search engine robot has already completed its crawl. Your full HTML document is completely ignored.

When your application will get crawled with only React
When your application will get crawled with only React

Summary

There are a lot of things that Next.js has built into its framework that will help you with SEO. I will cover them in detail throughout the course, but the take-away from this lesson is that server-side rendering is what makes Next.js SEO possible.