"Preview mode" not working when deployed with Firebase hosting

[gregdingle]

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.

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]

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]

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]

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

Added to caveats in 061668b

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

[gregdingle]

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]

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]

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]

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

[gregdingle]

Yes that’s correct.

…

Sent from my thumbs

On Sep 3, 2020, at 23:37, James Hegedus ***@***.***> 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.