firebase / firebase/firebase-tools

Framework hosting : Navigation between pages is always hard reload

Open
#6,141 38 comments 7 reactions 0 assignees View on GitHub
integration: web frameworks type: bug
Dominant language
TypeScript
Stars
4.5k
Forks
1.3k
Avg merge
1d 12h
Merged PRs (30d)
84

Description

### 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?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.