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

pogran · 2023-09-11T12:54:53Z

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 · 2023-09-11T13:16:35Z

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

this problem happend not every render

Gunt3r-Tp · 2023-09-12T14:41:17Z

@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 · 2023-09-12T14:53:10Z

@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

timneutkens · 2023-09-13T08:12:38Z

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:

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

pogran · 2023-09-13T08:28:52Z

@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

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

timneutkens · 2023-09-13T08:30:07Z

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

pogran · 2023-09-13T08:32:03Z

@timneutkens The same result ...

pogran · 2023-09-13T08:40:59Z

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

timneutkens · 2023-09-13T08:53:52Z

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

balazsorban44 · 2023-09-13T09:48:47Z

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 · 2023-09-19T22:42:08Z

@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 · 2023-09-26T05:32:41Z

any ideas how to solve this?

pogran · 2023-10-09T08:57:23Z

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

mehmetkursataydin · 2023-10-09T09:00:31Z

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

nitinTJ · 2023-10-16T05:49:14Z

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 · 2023-12-04T11:54:52Z

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 · 2023-12-06T13:02:23Z

@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

chk7964 · 2024-01-05T11:27:11Z

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

Cantinaband · 2024-02-19T12:11:29Z

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

abaracedo · 2024-02-21T12:40:46Z

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 · 2024-02-21T13:47:34Z

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

samcx · 2024-04-23T21:20:56Z

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!

github-actions · 2024-05-09T00:04:17Z

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.

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

pogran mentioned this issue Sep 11, 2023

Minified React Errors in production #50245

Open

1 task

This comment was marked as off-topic.

Sign in to view

balazsorban44 added the area: Server Components label Sep 13, 2023

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

samcx removed the area: Server Components label Apr 23, 2024

samcx closed this as completed Apr 23, 2024

github-actions bot added the locked label May 9, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

pogran commented Sep 11, 2023 •

edited by padmaia

Loading

pogran commented Sep 11, 2023 •

edited

Loading

This comment was marked as off-topic.

This comment was marked as off-topic.

Gunt3r-Tp commented Sep 12, 2023

pogran commented Sep 12, 2023

This comment was marked as off-topic.

timneutkens commented Sep 13, 2023

pogran commented Sep 13, 2023

timneutkens commented Sep 13, 2023

pogran commented Sep 13, 2023

pogran commented Sep 13, 2023

timneutkens commented Sep 13, 2023

This comment was marked as off-topic.

balazsorban44 commented Sep 13, 2023

Gunt3r-Tp commented Sep 19, 2023

pogran commented Sep 26, 2023

pogran commented Oct 9, 2023

mehmetkursataydin commented Oct 9, 2023

nitinTJ commented Oct 16, 2023 •

edited

Loading

gmmrx commented Dec 4, 2023

studentIvan commented Dec 6, 2023 •

edited

Loading

chk7964 commented Jan 5, 2024

Cantinaband commented Feb 19, 2024

abaracedo commented Feb 21, 2024

mehmetkursataydin commented Feb 21, 2024

samcx commented Apr 23, 2024 •

edited

Loading

github-actions bot commented May 9, 2024

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

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

Comments

pogran commented Sep 11, 2023 • edited by padmaia Loading

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

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

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

Additional context

pogran commented Sep 11, 2023 • edited Loading

This comment was marked as off-topic.

This comment was marked as off-topic.

Gunt3r-Tp commented Sep 12, 2023

pogran commented Sep 12, 2023

This comment was marked as off-topic.

timneutkens commented Sep 13, 2023

pogran commented Sep 13, 2023

timneutkens commented Sep 13, 2023

pogran commented Sep 13, 2023

pogran commented Sep 13, 2023

timneutkens commented Sep 13, 2023

This comment was marked as off-topic.

balazsorban44 commented Sep 13, 2023

Gunt3r-Tp commented Sep 19, 2023

pogran commented Sep 26, 2023

pogran commented Oct 9, 2023

mehmetkursataydin commented Oct 9, 2023

nitinTJ commented Oct 16, 2023 • edited Loading

gmmrx commented Dec 4, 2023

studentIvan commented Dec 6, 2023 • edited Loading

chk7964 commented Jan 5, 2024

Cantinaband commented Feb 19, 2024

abaracedo commented Feb 21, 2024

mehmetkursataydin commented Feb 21, 2024

samcx commented Apr 23, 2024 • edited Loading

github-actions bot commented May 9, 2024

pogran commented Sep 11, 2023 •

edited by padmaia

Loading

pogran commented Sep 11, 2023 •

edited

Loading

nitinTJ commented Oct 16, 2023 •

edited

Loading

studentIvan commented Dec 6, 2023 •

edited

Loading

samcx commented Apr 23, 2024 •

edited

Loading