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.

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

Next.js App Router doesn't work with google cache (http://webcache.googleusercontent.com/) #55231

Closed
1 task done
pogran opened this issue Sep 11, 2023 · 27 comments
Closed
1 task done
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. locked

Comments

@pogran
Copy link

pogran commented Sep 11, 2023

Link to the code that reproduces this issue or a replay of the bug

https://github.com/vercel-labs/ai-chatbot

To Reproduce

Go to cache page http://webcache.googleusercontent.com/search?q=cache%3Ahttps%3A%2F%2Fchat.vercel.ai&oq=cache%3Ahttps%3A%2F%2Fchat.vercel.ai&gs_lcrp=EgZjaHJvbWUqBggAEEUYOzIGCAAQRRg7MgYIARBFGDwyBggCEEUYOtIBCDQxMDFqMGo0qAIAsAIA&sourceid=chrome&ie=UTF-8 and see a lot of errors in devtools

image

Current vs. Expected behavior

this not ok behavior only in google cache http://webcache.googleusercontent.com/search?q=cache%3Ahttps%3A%2F%2Fchat.vercel.ai&oq=cache%3Ahttps%3A%2F%2Fchat.vercel.ai&gs_lcrp=EgZjaHJvbWUqBggAEEUYOzIGCAAQRRg7MgYIARBFGDwyBggCEEUYOtIBCDQxMDFqMGo0qAIAsAIA&sourceid=chrome&ie=UTF-8 and see a lot of errors in devtools

In real site everything is ok https://chat.vercel.ai/

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

"next": "13.4.7-canary.1"

Which area(s) are affected? (Select all that apply)

App Router

Additional context

Also I can show my real project with the same problems

NEXT-1810

@pogran pogran added the bug Issue was opened via the bug report template. label Sep 11, 2023
@pogran
Copy link
Author

pogran commented Sep 11, 2023

also the same problem with nextjs.org http://webcache.googleusercontent.com/search?q=cache%3Ahttps%3A%2F%2Fnextjs.org&oq=cache%3Ahttps%3A%2F%2Fnextjs.org&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQRRg60gEIMzkxOGowajSoAgCwAgA&sourceid=chrome&ie=UTF-8

image

this problem happend not every render

@pogran

This comment was marked as off-topic.

@pogran

This comment was marked as off-topic.

@Gunt3r-Tp
Copy link

@pogran I am facing the same issue, the webcache always behave in unexpected ways (different after a refresh or sometime after a click event...) eventhough everything seems fine in the live version. Same goes for the Nextjs website, which also lead me to believe that this isn't some kind of misconfiguration:
https://webcache.googleusercontent.com/search?q=cache:7I58Nxfiu5IJ:https://nextjs.org/

After replicating Google webcache site locally to run nextjs in dev mode, I got the following errors:

Page Router:
Uncaught (in promise) Error: Invariant: attempted to hard navigate to the same URL /preview?q=http://localhost:3000/ http://localhost:1337/preview?q=http://localhost:3000/

App Router:
Warning: Expected server HTML to contain a matching <main> in <body>.
Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

On other websites using Page Router, I saw a different error but the rendering is stable:

DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL

As opposed to 423 and 418 minified React error when using the App Router.
It's also worth noticiting that the document.baseURI points to webcache when using the App Router, but when using the Page router it does point to the proper app url.

@pogran
Copy link
Author

pogran commented Sep 12, 2023

@Gunt3r-Tp Page router is working more stable than App router. And as I see sites with App router don't have problem with seo. with page router they have problems. don't want to use depricated page router because seo. mb its connected with document.baseURI as you told . As I saw some sites in cache load great and after 2-3 sec they recieve this errors 423 and 418 and after that we have view without css

@pogran

This comment was marked as off-topic.

@timneutkens
Copy link
Member

We'll take a look but there is no urgency around this. What you are claiming is wrong, there is no effect on SEO.
Google's old page cache is an entirely different service than the crawler and it does not affect SEO.

The GoogleBot crawler is much more advanced than the page cache service, it runs a real browser (Chrome) and you can view exactly how your pages are indexed, including a screenshot of the page on Google Search Console by putting the url in the search bar and then clicking view tested page -> screenshot tab.

Here's an example of how nextjs.org/docs which uses App Router are indexed:

CleanShot 2023-09-13 at 10 10 05@2x

As you can see the page loads correctly so it has been indexed correctly.

@pogran
Copy link
Author

pogran commented Sep 13, 2023

@timneutkens but i also have bad view in screenshot view tab... examle my site https://xn--80afhl4affaesa.xn--80asehdb/ . in devtools i don't have errors. i think fonts errors it doesn't matter

image
image

i don't understand how to solve this problems ...

@timneutkens
Copy link
Member

Try disabling JavaScript. Could be that you're using a css-in-js library and it's not set up correctly for example.

@pogran
Copy link
Author

pogran commented Sep 13, 2023

@timneutkens The same result ...
image

@pogran
Copy link
Author

pogran commented Sep 13, 2023

@timneutkens I also have vercel code https://harry-potter-frontend.vercel.app/ and here disable javascript have another behaviour and nothing dislay
image

@timneutkens
Copy link
Member

That's because JS is required for hydration for that case (suspense boundaries and such).

@pogran

This comment was marked as off-topic.

@balazsorban44
Copy link
Member

Also I can show my real project with the same problems

@pogran could you please add a minimal reproduction of your own that simply reproduces the issue you are having? Please don't just point to a full/complex codebase. The less code/dependencies the better. This could help the investigation greatly, avoiding any external factors.

Note: Please refrain from tagging the maintainers for a quicker reply, as it might have the opposite effect

@Gunt3r-Tp
Copy link

@balazsorban44 the issue seems to happen with any starter project that use create-next-app with app router enabled. As mentioned above, the ai chat sample, which uses the default nextjs configurations, is also affected by this.

@pogran
Copy link
Author

pogran commented Sep 26, 2023

any ideas how to solve this?

@pogran
Copy link
Author

pogran commented Oct 9, 2023

@balazsorban44 @timneutkens this problem annoying. I don't have any errors when I use also vercel, but with google console I see problems...
image any ideas?

@mehmetkursataydin
Copy link

Unfortunately on the same track, waiting badly for this to be fixed

@nitinTJ
Copy link

nitinTJ commented Oct 16, 2023

image

I am facing this issue. Wherein I am getting Client side Application error, when I am trying to open my website with cache:https://bikes.tractorjunction.com

Any help will be appreciated.
In the real website, everything is working fine.

@gmmrx
Copy link

gmmrx commented Dec 4, 2023

This issue needs to be fixed asap. Google will hate NextJS projects. How can we fix this issue?

I've migrated my Next App from pages directory to app and this started to happen. When I click cache in google i can see my website for 1 sec and then getting these errors.

@studentIvan
Copy link

studentIvan commented Dec 6, 2023

@timneutkens this is awful issue. At least the next.js site doesn't throw the Application error: a client-side exception has occurred (see the browser console for more information). but our own site does. I haven't figure out yet how to opt out this "application cache error feature". The latest and stable next.js is using https://webcache.googleusercontent.com/search?q=cache:FtWV3LZVkTsJ:https://www.ridestore.se/skidjackor-dam&hl=en&gl=it

@jrsakizci @nitinTJ thank you guys, it's strange the other devs ignore it

image

@feedthejim feedthejim added the linear: next Confirmed issue that is tracked by the Next.js team. label Dec 6, 2023
@chk7964
Copy link

chk7964 commented Jan 5, 2024

Facing same issue
After disable browser javascript then work fine but with Javascript css not apply

@Cantinaband
Copy link

any news about this issue? We facing the same problems....

@abaracedo
Copy link

After replicating Google webcache site locally to run nextjs in dev mode, I got the following errors:

@Gunt3r-Tp, can you explain how to run it locally? 🤔

@mehmetkursataydin
Copy link

Maybe there is no more need to this anymore since Google removed caching. https://twitter.com/searchliaison/status/1753156161509916873

@samcx
Copy link
Member

samcx commented Apr 23, 2024

Hi everyone!

Since Google removed this, I will going ahead with closing this issue.

Feel free to create a new bug report if something similar arises!

@samcx samcx closed this as completed Apr 23, 2024
Copy link
Contributor

github-actions bot commented May 9, 2024

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot added the locked label May 9, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 9, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. locked
Projects
None yet
Development

No branches or pull requests