1

Nextjs Link (next/link) seems to be a client-side redirection (as in SPAs).

Looking at News Website such as CNN, every time a link is clicked, a document is fetched as a Static Html and later the js bundles, and below-the-fold assets are fetched.

https://edition.cnn.com/africa

enter image description here

Even with getStaticProps for a page (let's call it /bla), you get 2 different behaviors: 1.while navigate to host.com/bla by clicking on an Dom Element using Link. (client-side) 2.compared with navigating directly to host.com/bla from a bookmark. (server side)

The question is, while using Link, do you lose the SEO benefits in favor of less Network activity and faster load?

How does a Search Engine Crawler treats the website? bla.html exists and can be served but the navigation bar in the app that uses Link won't lead to serving it.

I am confused how these 2 seemingly contradictory behaviors come together?

1 Answer 1

1

Next.js Link component generates a regular a element with an href attribute when it is rendered.

The performance boosting JavaScript is layered on top of that with progressive enhancement which provides benefits to clients which support it.

Clients which don't support the JavaScript (as well as those will go directly to a particular page (e.g. when using "Open in new tab") still have the regular link to fall back on which then will give you the pre-rendered page from the server.


Unobtrusive JavaScript gives you the best of both worlds, but is usually a lot of work to implement. Next.js does most of that work for you (at least for basic loading of pages).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.