Rendering Strategy
The first item on our list is choosing a page rendering strategy. This depends on which router you are using in your application. Below, we will discuss all of them, but you can skip the part that is not relevant to you.
Pages router
Before the arrival of Next 13, we had several options for rendering pages:
- SSR (Server Side Rendering)
- SSG (Static Site Generation)
- ISR (Incremental Static Regeneration)
After the introduction of the App router, we gained another, entirely new type of page rendering:
- Server components (hybrid web applications)
To avoid dragging on and diving into what everyone already knows, let's quickly gather the drawbacks of Next < 12 rendering, and then see how all these issues are addressed in Next >= 13.
Drawbacks of SSR, SSG, ISR
- It's impossible to combine SSR & ISR. If we want dynamic SEO data, we need to use SSR, but in this case, we lose page loading speed and all the benefits of ISR.
- Limited capabilities in working with the root
<html>tag. - All SEO features must be configured manually, often involving third-party libraries.
App router (Server components)
- Allows the use of SSR & ISR together. This is literally implied by the name - hybrid web applications.
- Enables flexible handling of any page elements, conveniently reusing them.
- Most SEO features are already integrated into Next.js, with only configuration required.
Conclusion
In conclusion of this section, we can say that the best choice for SEO is to use the App router. So, whenever possible, use it. It's also worth noting that this is the official recommendation from Next.js.