We have a news detail page in our Next.js application. In order to render that page with the full Open Graph metadata including the news item's headline, Next.js requires us to write the page as an asynchronous server-side component which fetches the news item from the database before rendering. However, that causes the client to go to the server for every page render as the user navigates between various news detail pages. Going to the server and freshly fetching the news item from the database causes considerable delay as the user navigates.

We want to prefetch and cache the available news items on the client so that the single-page application can instantly rerender when navigating. We've done this, but it requires us to change the page into a synchronous client-side component. It completely fixed the lag when navigating, but comes at the price of not being able to include the news item details in the Open Graph metadata during the initial render.

Without Next.js, we would have the ability to initially render asynchronously on the server, then switch to synchronous rendering on the client. That gives us the best of both worlds. However, to my understanding, Next.js does not support this dual functionality.

This is for my web app

https://app.blockbeat.io