My site gives a page not found after I moved to a SSR approach

Fairly new to next.js/vite and everything was working on netlify for my site.
Since I needed some meta tags to render based on filename, I tried SSR(server side render).

I can build locally and see SSR work locally, although when I try netlify it does not work and get page not found. I do see index.html file when browse files.

Locally, there is an additional issue in that depending on whether its dev build or production build it does not like. so I have to use the below and switch it up to build

// //DEV approach
//import pkg from ‘react-helmet-async’;
//const { Helmet } = pkg;

// // PROD approach
import { Helmet } from ‘react-helmet-async’;

If using PROD approach you will get error when running local dev version upon showing in browser but

SyntaxError: [vite] Named export ‘HelmetProvider’ not found. The requested module ‘react-helmet-async’ is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from ‘react-helmet-async’;
const {HelmetProvider} = pkg;

So what are ways I can debug netlify versus what works locally?

What’s the name of the site?

Hi There Sid,

site name https://foodssr.netlify.app/

I built using and run using

npm run build
npm run serve

it works fine locally but not here.

I checked under the directories and I see on netfliy there is only a “client” folder but under my local dist folder there is both a “client” and “server”. I would imagine that might have an impact.

What can I do more?

Is SSR supported on netlify?

SSR is not supported without a framework that would output the correct files. I’d recommend a more robust framework like Next.js, Nuxt or Astro. But if you want to stick to Vite, you can check out: Netlify Functions | Vike

I converted it completely over to next.js and again it runs locally just fine and I was able to get it to work on netlify.com

1 Like