Context: I'm using pages directory on nextjs 13. I have a feature that allows users to download a PDF report. I send stringified html to a standalone api endpoint hosted on a continuously running server on aws and it returns a buffer which I then convert into a PDF & trigger a download for the user.

Issue: When I ping the pdf generation api endpoint locally, I end up with my desired output which is a PDF that includes all the styling (Tailwind). However, when I ping that same api endpoint from prod on my Vercel serverless function I end up with a PDF that has all the same info, but is stripped of all the styling.

What I've tried At first, my PDF generation was in my app under the pages/api route and I thought it was causing the problem because the library I was using (Puppeteer) has issues with a serverless env, so I decoupled that from my app and spun up an ec2 instance for it, but that didn't fix the issue. I also made sure it wasn't a CORS issue either by setting origin to *.

Here is my code that fetches and triggers PDF download

                try {
                    const result = await fetch('[PDF GENERATION API ENDPOINT]', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({ html: html?.outerHTML })
                    });
                    if (result.body && result.ok) {                                            
                        const blob = await result.blob();
                        const downloadUrl = URL.createObjectURL(blob);
                        const link = document.createElement('a');
                        link.href = downloadUrl;
                        link.download = `${projectName ?? ""}_${whichPreview.current ?? ""}.pdf`
                        document.body.appendChild(link);
                        link.click();
                        link.remove();