allow shallow routing between different pages & router.isFallback with SSR

[samstr]

Feature request

Is your feature request related to a problem? Please describe.

Shallow routing should work between all pages, not just the same page. (docs: https://nextjs.org/docs/routing/shallow-routing#caveats)

I had not noticed the "Caveats" section of the docs and I had assumed 'shallow' would work between pages.

I created a repo demonstrating the "bug" https://github.com/samstr/next-shallow-ssr before realising it's actually never been supported.

Describe the solution you'd like

My goal here is to implement nice fallback views for my pages (very similar to the zeit dashboard actually). The zeit dashboard is using static routing though so it's able to take advantage of router.isFallback. Pages with server side rendering can't do this. We are stuck waiting for data fetches when clicking a link and the current solution is the nprogress loading bar. (with-progress example)

I would love to be able to shallow route, skip getServerSideProps() and have the destination component appear immediately after a Link is clicked. I would also love to take advantage of router.isFallback in this instance and show some suspended loading components while getServerSideProps loads after the page transition.

No change needed for direct server requests. This only relates to client side routing and I believe it will make for nicer user experiences compared to nprogress.

Describe alternatives you've considered

I have managed to accomplish this using a nasty hack. Every page in this project also gets an /api/page/:page route. For direct server requests getInitialProps makes an axios request to /api/page/:page and populates initialProps. If !isServer getInitialProps returns {isFallback:true} so the next page loads immediately and I then make a request to get the data myself (and setFallback(false) on success)... if that makes any sense.

tl;dr the way the zeit dashboard works is a beautiful user experience and I would love to be able to build something like that (i.e. links transition the page immediately and show fallbacks) while taking advantage of getServerSideProps()

[suppayami]

Currently I managed to do this by using getInitialProps() and only fetch stuffs if it ran on server. Though it worked perfectly in my case, I would love to see a nicer approach using the new getServerSideProps()

[samstr]

@suppayami that was my solution too. getInitialProps was looking like this

if (isServer) {
  return {
    some: data,
    isFallback: false
} else {
  return {
    isFallback: true
  }
}

... and I'd show a fallback where necessary, and load data on the client if it didn't exist.

I've actually abandoned this whole idea in favor of static pages. getStaticProps and getStaticPaths

This RFC >> #11552 << gets me really excited for the future so I'm investing the time in static now in preparation for that feature. I feel like it's going to be a really important one and is the start of the "static all your things" movement

[samos123]

What I would like to be able to do is change to a different page and being able to provide the props because I already have the props and don't want to wait for refetch.

[leerob]

See #29117 (comment), as well as specifically loading.tsx.