Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

AppTree is not updated client side #10126

Open
lcswillems opened this issue Jan 16, 2020 · 8 comments
Open

AppTree is not updated client side #10126

lcswillems opened this issue Jan 16, 2020 · 8 comments
Labels
good first issue Easy to fix issues, good for newcomers

Comments

@lcswillems
Copy link

lcswillems commented Jan 16, 2020 •
edited
Loading

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
@lcswillems lcswillems mentioned this issue Jan 21, 2020
Closed
@flippidippi flippidippi mentioned this issue Feb 5, 2020
Open
@zanettin
Copy link

same on 9.3.1. thought first that the issue is on getDataFromTree from apollo but all queries fired are from the very first page rendered on ssr and are not updated during client side navigation. thanks for your work on this 👍

@zanettin
Copy link

@Timer @timneutkens do you have a suggested workaround for this issue or an idea of how to fix this? could try to give you a hand if you guide me a bit.

@zenflow
Copy link
Contributor

zenflow commented Apr 13, 2020 •
edited
Loading

@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.

@flippidippi
Copy link

Still can't upgrade Apollo due to this issue. Any updates?

@Timer Timer added the good first issue Easy to fix issues, good for newcomers label Jul 2, 2020
@MikeAliG
Copy link

Hello! Any update on this?

@mhhegazy mhhegazy mentioned this issue Oct 4, 2020
Closed
@mhhegazy
Copy link

mhhegazy commented Oct 4, 2020 •
edited
Loading

Hello,
What the use case for use AppTree on client (the app already wrapped in right context)? is this just for apollo?
and why you could getDataFromTree on client it meant to be used on server.. on client cache will be updated on client(browser)

@zenflow zenflow mentioned this issue Mar 30, 2021
Open
@zenflow zenflow mentioned this issue Apr 6, 2021
Closed
@zenflow
Copy link
Contributor

zenflow commented Apr 7, 2021

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

@oceandrama
Copy link

@devknoll @balazsorban44 Could you please return to this issue? This is still a problem in 12.1.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue Easy to fix issues, good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix client-side AppTree zenflow/next.js
8 participants
@mhhegazy @Timer @flippidippi @zenflow @zanettin @lcswillems @oceandrama @MikeAliG