How do I keep pages from re-rendering completely in Next.js?

[lifeiscontent]

E.g.

if I have a page called a.js, b.js, and c.js

in each file it looks like this

a.js

import Progress from "../components/progress";
import Link from "next/link";

export default () => {
  return (
    <div>
      <Progress value={0} />
      <Link href="/b" shallow>
        <a>Next</a>
      </Link>
    </div>
  );
};

b.js

import Progress from "../components/progress";
import Link from "next/link";

export default () => {
  return (
    <div>
      <Progress value={0.5} />
      <Link href="/c" shallow>
        <a>Next</a>
      </Link>
    </div>
  );
};

c.js

import Progress from "../components/progress";
import Link from "next/link";

export default () => {
  return (
    <div>
      <Progress value={1} />
      <Link href="/a" shallow>
        <a>Next</a>
      </Link>
    </div>
  );
};

each page will fully reload regardless of the shallow prop on the link and the state is lost. I would assume pages should be diffed so how can I get this behavior to work?

[willemliu]

I'm not sure what you are expecting. You mention state is lost. However I don't see any state being set.
Custom components not put in _app.js will always be rerendered after navigation.
Maybe have a look at this example:
https://static-next.willemliu.now.sh/

The menu is not rerendered upon navigation. But the rest is when using the spa links.

[lifeiscontent]

I took the example that @matepapp mentioned. https://codesandbox.io/s/5-getlayout-function-on-page-and-layout-components-oc5w7 and added some functionality when you click the logo the counter goes up. and as you transition from page to page, it keeps its state.

This is not what I was asking about though,

ideally, since every page has an _app wrapped with it, my hope is to have next.js persist the tree so that I could potentially do animations in React by just changing the key of a react component, once the route changes, it should diff the tree and see the key change and the animation could hook into the re-render of the tree.

But since there is no tree persisted across pages, there currently doesn't seem to be a way to do this. And when trying to build web-app experiences that people are used to within a SPA it is currently impossible.

[willemliu]

@matepapp @vacom @willemliu

None of your links refer to a solution that I was asking about, and as for @willemliu the reason why your example doesn't "rerender" is not that it doesn't, the reason why you don't lose the state is because of how closures work in JavaScript. It is re-rendering, but the context isn't lost due to the closure.

I don't think I quite understand how a rerender of an iframe can cause the contents of an iframe to keep its state. Does it mean that a rerender marked by the devtools does not mean a Dom rerender but "something else" ?

[lifeiscontent]

@willemliu sorry, I meant to tag @matepapp there, as for what you pointed to, the reason you're not having this issue is because of these lines:

https://github.com/willemliu/ts-react-next-persistent-component/blob/a5b813eb456d93b147e4947f4559db85cddaed55/pages/_app.tsx#L17-L24

which opts you out of static optimization.

[lifeiscontent]

I have this example that I've been working on: https://github.com/lifeiscontent/realworld

and I haven't been able to figure out how to keep the nav from re-rendering across pages while also be able to fetch data via apollo.

Dynamic App layouts are semi-reasonable to think about, but what I'm more curious about is

• If I need a page which is CSR, and needs apollo/redux/whatever how do you do that?
• if I need a page which is SSR, and needs apollo/redux/whatever how do you do that?

ideally, the way I'd like to think about it is to have a folder called layouts so I can switch between my different app layouts, but I'm unsure how to then tell next.js that I need this page to be SSR vs CSR.

[willemliu]

@lifeiscontent I have a project where I don't implement the getInitialProps but instead use a data store to propagate state changes to the _app. This way state is also maintained across pages. The example however is closed source as we are working on it for our enterprise podcast and live radio broadcast website. So I'm sorry I have nothing to show you now. But my hint is to use a global data store to manage your _app state.

[taylorbryant]

each page will fully reload regardless of the shallow prop on the link

https://nextjs.org/docs/routing/shallow-routing#caveats

[lifeiscontent]

@taylorbryant this link was pretty helpful. Thank you. Do you know if shallow routing still works with pages that use dynamic route segments?