AppTree is not updated client side

Bug report

Describe the bug

The <AppTree /> is not updated client-side, i.e. a first version of <AppTree /> is computed server-side and then it is always the same client side.

To Reproduce

A code such as the following would be sufficient:

import { renderToStaticMarkup } from "react-dom/server";

const App = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

App.getInitialProps = async ({ AppTree }) => {
  console.log("AppTree:", renderToStaticMarkup(<AppTree pageProps={{}} />));

  return {};
};

export default App;

For reproduction, I made a Codesandbox: https://codesandbox.io/s/nextjs-apptree-bug-pdkf3

If you click on the link and look at the console, you will see that whatever the page, <AppTree /> is always the same.

System information

• Version of Next.js: 9.2.0

[zenflow]

To whom it may concern, I put in a PR to fix this: #23721

[zenflow]

@ijjk I see you added AppTree in PR #7732. What are the chances of fixing it to work on client-side renders? 😀

It would be really great to be able to use it to prefetch data for a page before rendering/showing it, regardless of whether the rendering is happening server-side or browser-side, to get rid of unwanted <Loader/> renders where we have nothing to show the user. In this scenario, the user waits on the previous page until the next page is ready. The user can navigate from fully-formed page to fully-formed page, within the site now, not just when entering the site (when SSR is used). It seems like generally a better UX.