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.
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.