search

jthegedus / firebase-gcp-examples

🔥 Firebase app architectures, languages, tools & some GCP things! React w Next.js, Svelte w Sapper, Cloud Functions, Cloud Run.
https://medium.com/@jthegedus/table-of-contents-ec337953b39b
MIT License
650 stars 124 forks source link

"Preview mode" not working when deployed with Firebase hosting #133

Open gregdingle opened 4 years ago

gregdingle commented 4 years ago

Which Package & Your Environment

Next.js SSG|SSR on Firebase with Firebase Hosting & Cloud Functions

https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs

I copied the example and deployed my nextJS site to Firebase.

Expected Behaviour

I'm expecting a server side render on every request when preview mode is turned on. See the docs at https://nextjs.org/docs/advanced-features/preview-mode .

It works for me locally and I verified the cookies are being set after deployment.

image

Actual Behaviour

The same page content is returned. It does not show updates to the data.

Context

The original zeit PR for preview mode is here: https://github.com/vercel/next.js/pull/10459/files .

jthegedus commented 4 years ago

Yeah, I could never get preview mode to work when I wrote that example. I haven't delved into why that is the case. When you say you can get it to work locally, is that using the Firebase Emulator, or just Next.js by itself?

gregdingle commented 4 years ago

Thanks for the quick response. I was just using Next by itself.

Maybe "no preview mode" is something to add to the caveats on https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs#caveats .

jthegedus commented 4 years ago

Yeah definitely, I was going to look into the details eventually 😅

Added to caveats in https://github.com/jthegedus/firebase-gcp-examples/commit/061668b69a0b1bc4e699a7d5fe7d705ee91db4d4

If you continue to investigate and get this working, please share here!

gregdingle commented 4 years ago

I continued investigating and I isolated the cause to the custom distDir which we copied from the repo here. I don't know why that would be. Firebase does not seem to accept the default .next dir so I'm still at a loss. I only know it works when deployed without a distDir to vercel.

jthegedus commented 4 years ago

I think the test cases would have to be all on Firebase. It does not surprise me it works on Vercel without any special config as their platform knows how Next.js apps are built by default.

With Firebase we're doing quite a lot of things. The distDir config is so the Next.js server that runs on the Cloud Function can find the client-side code to the run SSR. The client-side code is in distDir which we deploy with the server code in the Cloud Function. Firebase by default ignores . prefixed dirs, so .next (the default distDir) is ignored on deployment to Cloud Functions and so the Next.js SSR server on Cloud Functions cannot find the client-side code as it doesn't get uploaded. So we need a custom distDir. It would be odd to me that preview mode would require the default distDir so I think it's something else to do with Firebase.

gregdingle commented 4 years ago

It would be odd to me that preview mode would require the default distDir so I think it's something else to do with Firebase.

I agree but the same bug reproed in vercell with distDir: 'dist'.

I opened a support ticket with them to find out more.

jthegedus commented 4 years ago

Oh, so you found an issue with preview mode when deployed to Vercel with a custom distDir?

gregdingle commented 4 years ago

Yes that’s correct.

Sent from my thumbs

On Sep 3, 2020, at 23:37, James Hegedus notifications@github.com wrote:

 Oh, so you found an issue with preview mode when deployed to Vercel with a custom distDir?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.