Search code examples
reactjsnext.jsserver-side-renderinggoogle-cloud-run

Next.js - local build works fine, production build deployed to GCP w/ Cloud Run has Minified React errors


Newish to Next.js. I deployed a Next app to GCP with Cloud Run. The local build runs with with no errors or warnings but I'm getting Minified React errors 419 and 425 on production.

I looked at the full error message but I'm not sure how to debug my code since my local build works fine.

I'm grabbing half a dozen collections from a Firestore db in a getStaticProps() and subscribing to two collections with onSnapshot in a useEffect() hook.

Any thoughts?

I could try grabbing everything in a useEffect (ditching the getStaticProps) but that seemed like the place to do my data fetching since it's a simple SPA with static data that doesn't change much.


Solution

  • The 400s error that you have mentioned generally means that the client is not in the capacity to complete a request.
    The error “419” Indicates that you're missing your CSRF token from your request; you may fix this by adding the token when it is generated in the headers token variable and without the CSRF-token the endpoint will return the 419 status response.
    Next,the error “425” indicates that when using Server-Side Rendering (SSR) with a framework like NextJS, it is uses React hydration, which basically means React is figuring out how to take the DOM structure rendered from the HTML file and convert it into a running single-page app (SPA),for this to work correctly, React Hydration requires that the HTML from the server and what your client-side app renders are an EXACT match.
    I would recommend you to rectify these in your source code and try to deploy the build again.
    Also check out these links for more information and examples: