SSG/R and Hardcore SPAs

[giuseppeg]

For a side project of mine I am using Next.js - mostly for the built-in routing and SSG capabilities.

The app has only one dynamic route that is /pages/picture/[id].js and 20 pictures - a tiny JSON payload which I am reading from the FS at build time. To speed up navigation (next/prev via arrow keys) the page uses the array of metadata and a cursor which is kept in local state and used to select the next/prev image.

This works fine but when the user stops navigating I would eventually like to update the URL. I've tried to use next-router but it seems that when I push the new route "/picture/" + currentId the page is re-rendered which makes totally sense I guess.

Ideally I would like to avoid this and do a full page render only upon initial navigation. So I thought I can use the history API to push and handle popostate events but I was wondering if you'd suggest a different more Next.js-y approach.

Thanks in advance for your help!

[vassbence]

Shallow routing might be the thing you are looking for.

[giuseppeg]

🤔 that might work if /pictures/123 is equivalent to /pictures/?id=123