Search code examples
javascriptseonext.js

How does Next.js improve SEO in comparison with CRA?

I'm new to this framework and after passing the interactive learning, I've got some questions about the way Next.js handle SEO issues.

  1. Next.js bold capability is its ability to render React components on the server-side, however, as far as I found out, it only renders the first request on the server-side and other requests will be rendered on the client-side, so how does it do better than usual CRA in terms of being SEO friendly?
  2. Based on the first assumption, crawlers like google, hit our site, then receive back the first response as a full HTML page, however for the other consecutive links inside the received page, it should execute client-side rendering using Javascript(which is the main Achilles heel for SEO) and, therefore there is no difference between CRA and Next.js except for the first request, right?
  3. If the previous assumptions are correct, then how could we use links inside our pages that are SEO friendly for crawlers like Google?
Solution
    1. As you mentioned, Next.js renders server side only the first request.

    Modern crawlers are able to crawl client side apps, so there is no difference for them between Next & CRA, but, there are some restrictions (such as first download size) which probably will fallback to "old" crawl mode, which is collect all links, and request them separately. That means that Next.js will SSR each request, CRA won't. As addition, many crawlers starts to pay attention to other parameters such as performance (for example First Paint), which SSR version will get better score.

    1. No one can for sure tell that Google bot will behave like this, it may work in a different way, as I've explained in #1.

    Render first page, (ssr version), collect links, and render each page separately (ssr version as well).

    1. The cool think with Next.js Link component is that it wraps a proper anchor, and sets a correct herf that means that Bots will be able to operate in the "old" way without JS enables, if JS is enables it will be rendered much faster (it has several optimisations, such as preloading next pages etc...)