Deployed app returns an error if I try to initialize a var with preloaded value

Question

We've got a Next.js application and this page which is supposed to show a product at the very first render. Thus, we use getServerSideProps to get the product data on server end:

export const getServerSideProps : GetServerSideProps<ProductPageProps> = async (context) => {
 const result = await checkProductRoute(fii, name);
 // ...
 switch (result.response) { 
 //...
 default: 
 if (!result.page) throw "Error getting page data!";
 return { props: { ...result.page, //some other irrelated stuff } };
 }
};

Later, in the component itself I either use the product data from the page props directly or initialize the object with one of the following ways:

const item = pageProps.item;
const item = useMemo(() => pageProps.item, [pageProps.item]);
const [ item, setItem ] = useState(pageProps.item);

And use it in the component like this:

{
 item &&
 <Product
 mode="ProductPage"
 category={item?.category}
 item={item}
 //...
 />
 }

Any of those 4 methods makes the page deployed to Netlify return 500 but when testing locally, the page does work and the related element is there in the HTML right away.

If I do this though:

const [ item, setItem ] = useState<Item|undefined>(undefined);
useEffect(() => setItem(pageProps.item), [pageProps.item]);

the Netlify deployed page won't crash and the whole thing is rendered suucessfully but the item isn't there on the first render (which is bad for some crawlers).

The thing I fail to understand is why would the deployed page crash? Is it the server sending the data asynchroniously? If so, why doesn't useMemo approach work?

I've tried the Netlift SSR functions logs, but it doesn't look it even register the error.

• Drew Reese: What is the error? What specifically is crashing, and how? Can you edit to include any complete error message(s) and accompanying stacktraces?
• eastwing: @DrewReese in the browser console, it just says Internal Server Error. Not sure how do I check the error on Netlify end, sorry
• Drew Reese: The backend server is where you would check for issues/problems serving the requested page though, so you should probably look into how to do that on the hosting service you are using.
• eastwing: @DrewReese I would assume that too, but as I said, when I run the FE app locally, it works perfectly, plus it works on Netlify whenn I initiate item with undefined and then set the value within useEffect
• Akhilesh B Chandran: Did you tried running the "build" command locally and does it threw any errors?

Answer 1

So, it was totally my miss.

First of all, I was checking the prod function logs while the deploys were made to staging (well, probably not totally my miss - Netlify, it is really hard to find branch deploy logs)

Anyway, the problem is, the component I was trying to SSR has share button that uses navigator, a component exists only in browsers. Once I made the code more "server-proof" the problem was solved.