SSR with vite and react

[tschams]

How can SSR work with

import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { InertiaProgress } from "@inertiajs/progress";
import Authenticated from "@Layouts/Authenticated.jsx";
import Guest from "@Layouts/Guest.jsx";
import ErrorBoundary from "@Components/ErrorBoundary.jsx";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import "../css/app.css"; //import the app css
import { ThemeProvider, createTheme } from "@mui/material/styles";

const container = document.getElementById("app");
const root = createRoot(container);
const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2",
    },
  },
});
const appName =
  window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
const guestLayouts = [
  "ConfirmPassword",
  "ForgotPassword",
  "Login",
  "Register",
  "ResetPassword",
  "VerifyEmail",
  "Welcome",
];
createInertiaApp({
  title: (title) => `${title} - ${appName}`,
  resolve: async (name) => {
    const pages = import.meta.glob("./Pages/**/*.jsx");
    const page = (await pages[`./Pages/${name}.jsx`]()).default;
    const splitName = name.split("/")[1];
    const Layout = guestLayouts.includes(splitName) ? Guest : Authenticated;
    page.layout = (page) => (
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <React.StrictMode>
          <ErrorBoundary>
            <ThemeProvider theme={theme}>
              <Layout>{page}</Layout>
            </ThemeProvider>
          </ErrorBoundary>
        </React.StrictMode>
      </LocalizationProvider>
    );
    return page;
  },
  setup({ App, props }) {
    root.render(React.createElement(App, props));
  },
});

InertiaProgress.init({
  // The delay after which the progress bar will
  // appear during navigation, in milliseconds.
  //delay: 250,

  // The color of the progress bar.
  color: "#29d",

  // Whether to include the default NProgress styles.
  includeCSS: true,

  // Whether the NProgress spinner will be shown.
  showSpinner: false,
});

vite.config.js

const path = require("path");

export default ({ command }) => ({
  base: command === "serve" ? "" : "/build/",
  publicDir: "fake_dir_so_nothing_gets_copied",
  build: {
    manifest: true,
    outDir: "public/build",
    rollupOptions: {
      input: "resources/js/app.jsx",
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./resources/js/"),
      "@css": path.resolve(__dirname, "./resources/css/"),
      "@cssLayouts": path.resolve(__dirname, "./resources/css/Layouts/"),
      "@cssPages": path.resolve(__dirname, "./resources/css/Pages/"),
      "@cssComponents": path.resolve(__dirname, "./resources/css/Components/"),
      "@Components": path.resolve(__dirname, "./resources/js/Components/"),
      "@Layouts": path.resolve(__dirname, "./resources/js/Layouts"),
      "@BreezeComponents": path.resolve(
        __dirname,
        "./resources/js/BreezeComponents/"
      ),
    },
  },

  plugins: [
    react({
      babel: {
        configFile: true,
      },
    }),
    //add blade plugin to reload page on change blade files
    {
      name: "blade",
      handleHotUpdate({ file, server }) {
        if (file.endsWith(".blade.php")) {
          server.ws.send({
            type: "full-reload",
            path: "*",
          });
        }
      },
    },
  ],
});

Besides that I can't access the document, which I am trying to do in my first file, I am also getting stuck on the build step.