Render side nav server-side

[jharvey10]

Currently the left side nav is rendered on the client side in response to the final JS chunk file being downloaded from the page (thereby enabling page hydration). The absence of this content on the first paint negatively impacts SEO because the cross linking between pages is greatly reduced for what a search engine would see.

This issue is the work to render the side nav server-side instead so it is available on first paint.

The piece that can remain dynamic and dependent on a context or hook is the actively selected entries from the nav.

[mattrosno]

This will be a great UX improvement. In the future when we're using next/link again for anchors and not doing full page reloads at page navigation, will the side nav be rendered server-side for just the initial request? And then hydrated as a normal React component that receives context updates to get updated at page navigation?

Another way to ask this - once we're using the Next.js Link component, will the side nav flash with a new side nav coming in server side each new page? Or can we keep the side nav on the page and just feed it new content?

[mattrosno]

I'm not entirely convinced of the SEO implications here.

Per https://nextjs.org/blog/next-12#bot-aware-isr-fallback, Next.js ISR pages won't let crawlers index loading states.

I can't test this because we're currently blocking crawlers while we're on a subdomain. What I want to do is simulate the Googlebot user agent and look at what links are available on the first network request:

I trust that test over anything else, but a couple sites that I tried. The side nav links don't show up here, but I don't know if this test uses a crawler user agent:

Regarding SEO, I think we should do this issue for UX reasons and if it helps SEO, great. My understanding is that crawlers don't only index what's available on first paint.

[jharvey10]

Another way to ask this - once we're using the Next.js Link component, will the side nav flash with a new side nav coming in server side each new page? Or can we keep the side nav on the page and just feed it new content?

@mattrosno There definitely won't be a flash because the nav + page content will all be part of the generated html for a given route, so it'll all come across the wire together. Based on what we saw during the performance testing of the route preloading, the "next" page is downloaded async in the background, and once ready, the route switches and the content updates. Assuming that's the case, the new side nav plus the new page content will all be updated as a single unit.

[alisonjoseph]

Hey team! Please add your planning poker estimate with Zenhub @andreancardona @francinelucca @jdharvey-ibm