firebase-tools icon indicating copy to clipboard operation
firebase-tools copied to clipboard

Framework hosting : Navigation between pages is always hard reload

Open VVIERV00 opened this issue 1 year ago • 30 comments

EDIT: Better naming for the bug

App Directory: Navigation between pages is always hard reload Next.js Router.push() reloads page automatically on firebase

[REQUIRED] Environment info

Integration: Enabled web frameworks Packages Version: firebase: ^9.22.0 firebase-admin: ^11.8.0 react: 18.2.0 next: ^13.4.3 Firebase CLI version: 12.4.4 Operating System: Ubuntu 22.04

fIrebase.json

"hosting": { "source": ".", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "frameworksBackend": { "region": "europe-west1" }, "rewrites": [ { "source": "**", "destination": "/index.html" } ] }

firebaserc

{ "projects": { "default": "XXXX" } }

[REQUIRED] Test case

[REQUIRED] Steps to reproduce

I will attempt to create a minimal project if necessary. My Next.js application does not have any unusual features.

[REQUIRED] Expected behavior

Successful deployment of a Next.js 13 application. Dynamic routes function as intended. Deployment process is smooth and without issues.

[REQUIRED] Actual behavior

Comand line deploy --debug shows no errors but I am facing some issues: Only the run.app cloud run works as expected, but the web.app (and my custom domain) won't fully work:

  • Dynamic routes don't function properly or consistently; the route loads indefinitely or redirects to '/'.
  • React context seems to reset entirely when navigating through the application. This issue doesn't occur on run.app. The root cause might be a momentarily change in the authentication state or another bug.
  • 404 Errors on manifest files and cache if using next-pwa to make it a PWA. Indeed I also had https://github.com/firebase/firebase-tools/issues/6135. e.g. workbox-7c2a5a06.js:1 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://xxx.io/_next/app-build-manifest.json","status":404}]

In the cloud functions logs I can see the 404 errors and 304 e.g 2023-07-17 12:44:29.030 GET304 719 B12 msChrome 114 https://XXX-XXX-ew.a.run.app/firebase-messaging-sw.js GET404 3.25 KB36 msWhatsApp/2.23.12.78 A https://fh-14db9a1xxx891---xxx-xx-ew.a.run.app/xxxx.io/booking GET404 4.06 KB3.6 sChrome 114 https://fh-14db9a1d1xx---xxxx-xxx-ew.a.run.app/_next/static/css/8c71518ccbccb8e4.css GET404 4.01 KB2 sChrome 114 https://fh-14db9a1d16a5e891---xxx-xxx-ew.a.run.app/_next/static/chunks/webpack-1ef83629ce8faadf.js At first I also got memory limit errors so I increased to 512

The key questions I have are:

Why are both run.app and web.app necessary, and how do they handle dynamic routes through the cloud function? This isn't clear from the documentation. Could I redirect my custom domain to the cloud.run? I previously faced the 404 Error associated with the pinTags issue, which was resolved by re-enabling pinTags. However, could this have any lingering effects?

VVIERV00 avatar Jul 17 '23 12:07 VVIERV00