Next SSR interception

This example app showcases how to hook into Next Router logic and avoid executing getServerSideProps when navigating to pages in the browser.

See the code on GitHub or in CodeSandbox.

Use links above to navigate to the pizza page and back to this page. Play around with the toggle at the top to see the difference between the default behavior (route interception disabled) and the updated behavior.

The pizza page loads data that takes a long time to arrive. This is on purpose to show the difference in behavior.

When the interception is disabled, after clicking the link, the browser does not show any loading information. It seems like the application is stuck, while it is waiting for getServerSideProps to be finished.

When the interception is enabled, the client-side navigation is almost instant, as the browser skips getServerSideProps. This means that the page will be rendered with stale/empty props. The page component needs to handle that case and load the data in the browser while showing some loading indicator.

In the case of this pizza page, if the page was already visited, the page will show data from the last time the page was shown. This gives it a more app-like experience, since navigating to an already-visited view shows that view as it looked before.

This pattern could be useful when building a highly-interactive web app where each page navigation should have an app-like feel and be instant. If a page needs data to be loaded, it can do so on its first render.

The benefit of this approach over simply removing getServerSideProps is that this interception approach still has SSR enabled for these pages. The pages will work even if the user has JavaScript disabled. The HTML sent by the server will already have the page content visible.