is it possible to navigate to another route and going to a specific bookmark right after?

Question

so I'm using Next.js which is built on react.js and here is the problem:

I want to be able to navigate to another route and then going to a specific div in that destination route using HTML 5 bookmark feature.

obviously in the normal way this won't work by just giving the nav items the id of a div since the content of the page hasn't been rendered yet so it has to be done after the request has been sent.

is there a way to implement this?

Answer 1

The HTML 5 Bookmarks indeed won't work if your destination page requests target content from backend server client side (e.g. via XHR or Fetch).

To solve this issue with Next.js, you can enable server-side rendering for you destination page by loading the target content in a getInitialProps method:

function DestinationPage({ targetContent }) {
  // render your target content somehow
}

DestinationPage.getInitialProps = async () => {
  const targetContent = await fetch(backendUrl);
  return { targetContent };
}

export default DestinationPage;

Thus you will request your target content server-side and render a page already fed with your content in a browser. And thus your bookmarks will be initially present on your page.

You can read more about how to switch a Next.js page to server-side rendering mode in this blog post.