vite-plugin-ssr-config 1.0.4 → 1.1.0-beta1

package/README.md

@@ -1,6 +1,6 @@
 # vite-plugin-ssr-config
 
-[vite-plugin-ssr-config](https://github.com/yracnet/vite-plugin-ssr-config) configures server-side rendering (SSR) with Vite, providing essential setups and options for building both client and server bundles, along with necessary React components for SSR, specifically for [React](https://reactjs.org/ "react - A JavaScript library for building user interfaces"), [React Router](https://reactrouter.com/ "react-router - Declarative routing for React"), and [React Query](https://tanstack.com/query "react-query - Data fetching and caching library").
+[vite-plugin-ssr-config](https://github.com/yracnet/vite-plugin-ssr-config) configures server-side rendering (SSR) with Vite, providing essential setups and options for building both client and server bundles, along with necessary React components for SSR, specifically for [React](https://reactjs.org/ "react - A JavaScript library for building user interfaces"), [React Router](https://reactrouter.com/ "react-router - Declarative routing for React"), [React Query](https://tanstack.com/query "@tanstack/react-query - Data fetching and caching library"), and [react-slotx](https://github.com/react-slotx/react-slotx "react-slotx - Slot-based content management for React SSR").
 
 ## Additional Resources
 
@@ -10,6 +10,7 @@ For more detailed information and resources related to `vite-plugin-ssr-config`,
 - **GitHub Repository**: [yracnet/vite-plugin-ssr-config](https://github.com/yracnet/vite-plugin-ssr-config)
 - **Dev.to Article**: [Create an SSR Application with Vite, React, React Query and React Router](https://dev.to/yracnet/create-an-ssr-application-with-vite-react-react-query-and-react-router-2dd5)
 - **Tutorial**: [Tutorial](./tutorial.md)
+- **react-slotx Documentation**: [react-slotx GitHub](https://github.com/react-slotx/react-slotx)
 
 ## Install
 
@@ -19,15 +20,16 @@ To add this plugin to your project, run the following commands:
 yarn add vite-plugin-ssr-config vite-plugin-web-routes -D
 ```
 ```bash
-yarn add react-query react-router express
+yarn add @tanstack/react-query react-router express react-slotx
 ```
 
 This will install:
 
 - vite-plugin-ssr-config: The plugin for server-side rendering (SSR) with Vite.
 - vite-plugin-web-routes: Automatically generate route files for your pages.
-- react-query: Delegate Hydrated State
+- @tanstack/react-query: Delegate Hydrated State
 - react-router: The routing library for React, used to manage navigation within the app.
+- react-slotx: Slot-based content management system for SSR, enabling dynamic head and SEO optimization.
 
 
 ## Basic Configuration Example
@@ -44,7 +46,7 @@ export default defineConfig({
   plugins: [
     react(),
     web({
-      moduleFile: '.ssr/routes.tsx'
+      moduleId: 'ssr-pages'
     }),
     ssr({
       chacheDir: '.ssr'
@@ -53,6 +55,32 @@ export default defineConfig({
 });
 ```
 
+### Legacy project
+
+If you use the vite-plugin-pages, you need config the moduleId
+
+```typescript
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import pages from "vite-plugin-pages";
+import ssr from "vite-plugin-ssr-config";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    pages({
+      moduleId: "ssr-pages",
+      routeStyle: "remix",
+      dirs: "src/pages",
+    }),
+    ssr({
+      chacheDir: '.ssr'
+    })
+  ],
+});
+```
+
+
 ## Default Configuration
 
 The following default values are provided for each configurable attribute in the plugin:
@@ -240,3 +268,84 @@ These custom commands are designed to provide flexibility in your Vite SSR workf
 ## Use Case
 
 This plugin is intended for projects that require SSR with Vite, specifically React apps. It helps in managing SSR entry files, routing, page rendering, and output structure for both server and client builds.
+
+# SEO with react-slotx
+
+The plugin integrates [react-slotx](https://github.com/yracnet/react-slotx) for dynamic head content management. It lets any page component inject `<title>`, `<meta>`, and other head elements that are rendered server-side and kept reactive on the client.
+
+## How it works
+
+| Part | Import | Role |
+|---|---|---|
+| `Slot` | `react-slotx` | Register content into a named slot from any component |
+| `Outlet` | `react-slotx` | Render slot content at a specific location in the tree |
+| `SlotProvider` | `react-slotx` | Context provider — wraps the app (handled by the plugin) |
+| `SlotClient` | `react-slotx` | Client-side slot store (handled by the plugin) |
+| `SlotSSRClient` | `react-slotx/server` | Server-side slot store with `renderToString` (handled by the plugin) |
+
+The plugin's default `root.jsx` already places an `<Outlet name="head" />` inside `<head>`. You only need to use `<Slot>` in your pages.
+
+## Root document
+
+```jsx
+// ssr/root.jsx
+import { LiveReload } from "@ssr/liveReload.jsx";
+import { ViteScripts } from "@ssr/viteScripts.jsx";
+import { Outlet as OutletSlot } from "react-slotx";
+import { Outlet as OutletRoutes } from "react-router";
+
+export const RootDocument = () => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <LiveReload />
+        <OutletSlot name="head" />
+      </head>
+      <body>
+        <OutletRoutes />
+        <ViteScripts />
+      </body>
+    </html>
+  );
+};
+```
+
+## Page usage
+
+```jsx
+import { Slot } from "react-slotx";
+
+export default function PostPage() {
+  const { data = {} } = useQuery(...);
+  return (
+    <>
+      <Slot name="head">
+        {/* title support only string content */}
+        <title>{`${data.title} — My App`}</title>
+        <meta name="description" content={data.body} />
+        <meta property="og:title" content={data.title} />
+      </Slot>
+      {/* page content */}
+    </>
+  );
+}
+```
+
+The `<Slot name="head">` content is extracted server-side via `slotClient.renderToString("head")` and injected into the HTML stream before `</head>`. On the client it stays reactive through `<OutletSlot name="head" />`.
+
+## Slot props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `name` | `string` | `"default"` | Slot name — must match the `name` on `<Outlet>` |
+| `priority` | `number` | `1` | When multiple `<Slot>` share a name, the highest priority wins (in `"priority"` mode) |
+| `dangerouslyEnableRender` | `boolean` | `false` | Also render children in-place (not just in the outlet) |
+
+## Outlet props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `name` | `string \| "*"` | `"default"` | Which slot to render. `"*"` renders all slots |
+| `mode` | `"priority" \| "first" \| "last" \| "all"` | `"priority"` | How to resolve multiple slots with the same name |

package/dist/index.cjs

@@ -41,6 +41,7 @@ var import_path5 = __toESM(require("path"), 1);
 var assertSSRConfig = (ssrOpts = {}) => {
   let {
     root = process.cwd(),
+    version = "1.1",
     disableBuild = false,
     //Main Entry
     entryClient = ".ssr/entryClient.jsx",
@@ -67,6 +68,7 @@ var assertSSRConfig = (ssrOpts = {}) => {
   } = ssrOpts;
   return {
     root,
+    version,
     disableBuild,
     entryClient,
     entryRender,
@@ -412,6 +414,7 @@ var pluginResolve = (ssrConfig2) => {
 };
 
 // src/plugin-serve/index.ts
+var import_express = __toESM(require("express"), 1);
 var import_fs_extra2 = __toESM(require("fs-extra"), 1);
 var import_path4 = __toESM(require("path"), 1);
 var pluginServe = (ssrConfig2) => {
@@ -431,33 +434,40 @@ var pluginServe = (ssrConfig2) => {
       };
     },
     configureServer: async (devServer) => {
-      return async () => {
-        devServer.middlewares.use(async (req, res, next) => {
-          const indexHtmlPath = import_path4.default.join(root, req.url, "index.html");
-          if (import_fs_extra2.default.existsSync(indexHtmlPath)) {
-            return devServer.transformIndexHtml(
-              req.url,
-              import_fs_extra2.default.readFileSync(indexHtmlPath, "utf-8")
-            ).then((html) => {
-              res.setHeader("Content-Type", "text/html");
-              res.setHeader("Pragma", "no-cache");
-              res.setHeader("Expires", "0");
-              res.end(html);
-            });
-          }
-          next();
-        });
-        devServer.middlewares.use(async (req, res, next) => {
-          try {
-            process.env.SSR = true;
-            const mod = await devServer.ssrLoadModule("@ssr/handler.js", {
-              fixStacktrace: true
-            });
-            await mod.handler(req, res, next);
-          } catch (error) {
-            next(error);
-          }
-        });
+      const appProxy = (0, import_express.default)();
+      appProxy.use(async (req, res, next) => {
+        if (req.method !== "GET") {
+          return next();
+        }
+        const indexHtmlPath = import_path4.default.join(root, req.url, "index.html");
+        if (import_fs_extra2.default.existsSync(indexHtmlPath)) {
+          return devServer.transformIndexHtml(
+            req.url,
+            import_fs_extra2.default.readFileSync(indexHtmlPath, "utf-8")
+          ).then((html) => {
+            res.setHeader("Content-Type", "text/html");
+            res.setHeader("Pragma", "no-cache");
+            res.setHeader("Expires", "0");
+            res.end(html);
+          });
+        }
+        next();
+      });
+      appProxy.use(async (req, res, next) => {
+        try {
+          const mod = await devServer.ssrLoadModule("@ssr/handler.js", {
+            fixStacktrace: true
+          });
+          await mod.handler(req, res, next);
+        } catch (error) {
+          devServer.ssrFixStacktrace(error);
+          process.exitCode = 1;
+          next(error);
+        }
+      });
+      return () => {
+        process.env.SSR = true;
+        devServer.middlewares.use(appProxy);
       };
     }
   };

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import { UserConfig, PluginOption } from 'vite';
 
 type SSRConfig = {
     root: string;
+    version: "1.0" | "1.1";
     entryClient: string;
     entryRender: string;
     server: string;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { UserConfig, PluginOption } from 'vite';
 
 type SSRConfig = {
     root: string;
+    version: "1.0" | "1.1";
     entryClient: string;
     entryRender: string;
     server: string;

package/dist/index.js

@@ -5,6 +5,7 @@ import path5 from "path";
 var assertSSRConfig = (ssrOpts = {}) => {
   let {
     root = process.cwd(),
+    version = "1.1",
     disableBuild = false,
     //Main Entry
     entryClient = ".ssr/entryClient.jsx",
@@ -31,6 +32,7 @@ var assertSSRConfig = (ssrOpts = {}) => {
   } = ssrOpts;
   return {
     root,
+    version,
     disableBuild,
     entryClient,
     entryRender,
@@ -375,6 +377,7 @@ var pluginResolve = (ssrConfig2) => {
 };
 
 // src/plugin-serve/index.ts
+import express from "express";
 import fs2 from "fs-extra";
 import path4 from "path";
 var pluginServe = (ssrConfig2) => {
@@ -394,33 +397,40 @@ var pluginServe = (ssrConfig2) => {
       };
     },
     configureServer: async (devServer) => {
-      return async () => {
-        devServer.middlewares.use(async (req, res, next) => {
-          const indexHtmlPath = path4.join(root, req.url, "index.html");
-          if (fs2.existsSync(indexHtmlPath)) {
-            return devServer.transformIndexHtml(
-              req.url,
-              fs2.readFileSync(indexHtmlPath, "utf-8")
-            ).then((html) => {
-              res.setHeader("Content-Type", "text/html");
-              res.setHeader("Pragma", "no-cache");
-              res.setHeader("Expires", "0");
-              res.end(html);
-            });
-          }
-          next();
-        });
-        devServer.middlewares.use(async (req, res, next) => {
-          try {
-            process.env.SSR = true;
-            const mod = await devServer.ssrLoadModule("@ssr/handler.js", {
-              fixStacktrace: true
-            });
-            await mod.handler(req, res, next);
-          } catch (error) {
-            next(error);
-          }
-        });
+      const appProxy = express();
+      appProxy.use(async (req, res, next) => {
+        if (req.method !== "GET") {
+          return next();
+        }
+        const indexHtmlPath = path4.join(root, req.url, "index.html");
+        if (fs2.existsSync(indexHtmlPath)) {
+          return devServer.transformIndexHtml(
+            req.url,
+            fs2.readFileSync(indexHtmlPath, "utf-8")
+          ).then((html) => {
+            res.setHeader("Content-Type", "text/html");
+            res.setHeader("Pragma", "no-cache");
+            res.setHeader("Expires", "0");
+            res.end(html);
+          });
+        }
+        next();
+      });
+      appProxy.use(async (req, res, next) => {
+        try {
+          const mod = await devServer.ssrLoadModule("@ssr/handler.js", {
+            fixStacktrace: true
+          });
+          await mod.handler(req, res, next);
+        } catch (error) {
+          devServer.ssrFixStacktrace(error);
+          process.exitCode = 1;
+          next(error);
+        }
+      });
+      return () => {
+        process.env.SSR = true;
+        devServer.middlewares.use(appProxy);
       };
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-ssr-config",
-  "version": "1.0.4",
+  "version": "1.1.0-beta1",
   "license": "MIT",
   "description": "A powerful Vite plugin designed to enable Server-Side Rendering (SSR) for React applications. It provides a comprehensive solution for bundling both SSR and CSR, with built-in support for React Router and React Query for efficient API handling and page rendering.",
   "keywords": [
@@ -10,6 +10,7 @@
     "react",
     "react-router",
     "react-query",
+    "react-slotx",
     "server",
     "express"
   ],
@@ -34,28 +35,30 @@
   "homepage": "https://github.com/yracnet/vite-plugin-ssr-config",
   "bugs": "https://github.com/yracnet/vite-plugin-ssr-config/issues",
   "scripts": {
+    "dev": "tsup --watch",
     "build": "tsup",
     "prepublish": "yarn build",
     "prepack": "yarn build"
   },
   "dependencies": {
-    "dotenv-local": "^1.0.2",
-    "fs-extra": "^11.2.0",
+    "fs-extra": "^11.3.5",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-router": "^7.17.0",
     "react-router-dom": "^7.17.0"
   },
   "peerDependencies": {
+    "dotenv-local": "^1.0.3",
+    "react-slotx": "^0.1.1",
     "vite": ">=4.0.0"
   },
   "devDependencies": {
-    "@types/express": "^5.0.0",
+    "@types/express": "^5.0.6",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.10.2",
-    "express": "^4.21.2",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.2",
-    "vite": "^4.0.0"
+    "@types/node": "^25.9.3",
+    "express": "^5.2.1",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
   }
 }

package/ssr/entryClient.jsx

@@ -1,18 +1,27 @@
-import { PageBrowser } from "@ssr/pageBrowser.jsx";
+import { QueryClient, hydrate } from "@tanstack/react-query";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
+import { PageBrowser } from "./pageBrowser.jsx";
+import { SlotClient } from "react-slotx";
 
 startTransition(() => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        suspense: false,
+      },
+    },
+  });
+  const slotClient = new SlotClient();
   const hydratedState = JSON.parse(atob(window.__HYDRATED_STATE__));
-  const setHydratedState = () => {
-    throw Error("Changes Not Allowed");
-  };
+  hydrate(queryClient, hydratedState);
   hydrateRoot(
     document,
     <StrictMode>
       <PageBrowser
-        hydratedState={hydratedState}
-        setHydratedState={setHydratedState}
+        basename={process.env.SSR_BASENAME}
+        queryClient={queryClient}
+        slotClient={slotClient}
       />
     </StrictMode>,
     {
@@ -20,6 +29,6 @@ startTransition(() => {
         const logs = componentStack?.split("\n");
         console.log("Error:", error, logs);
       },
-    }
+    },
   );
 });

package/ssr/entryRender.jsx

@@ -1,28 +1,26 @@
-import { PageServer } from "@ssr/pageServer.jsx";
+import { dehydrate, QueryClient } from "@tanstack/react-query";
 import { StrictMode } from "react";
-import { Transform } from "stream";
 import { renderToPipeableStream } from "react-dom/server";
-
-const createRequestContext = () => {
-  return {
-    state: {},
-    setHydratedState(partial) {
-      this.state = {
-        ...this.state,
-        ...partial,
-      };
-    },
-  };
-};
+import { Transform } from "stream";
+import { PageServer } from "./pageServer.jsx";
+import { SlotSSRClient } from "react-slotx/server";
 
 const renderDefault = async (request, response, next) => {
-  const context = createRequestContext();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        suspense: true,
+      },
+    },
+  });
+  const slotClient = new SlotSSRClient();
   const { pipe } = renderToPipeableStream(
     <StrictMode>
       <PageServer
-        path={request.originalUrl}
-        hydratedState={""} // Access is Not Allowed
-        setHydratedState={context.setHydratedState.bind(context)}
+        basename={process.env.SSR_BASENAME}
+        location={request.originalUrl}
+        queryClient={queryClient}
+        slotClient={slotClient}
       />
     </StrictMode>,
     {
@@ -33,15 +31,19 @@ const renderDefault = async (request, response, next) => {
       onAllReady: () => {
         // console.log(request.originalUrl, "onAllReady");
         let injected = false;
+        const state = dehydrate(queryClient);
+        const headTags = slotClient.renderToString("head");
+        const stateScript = `<script>window.__HYDRATED_STATE__ = "${btoa(JSON.stringify(state))}";</script>`;
+        const injectString = ["", headTags, stateScript, ""]
+          .join("\n");
         const transform = new Transform({
           transform(chunk, encoding, callback) {
             if (!injected) {
-              const stateScript = `<script>window.__HYDRATED_STATE__ = "${btoa(JSON.stringify(context.state))}";</script>`;
               const str = chunk.toString();
               const idx = str.lastIndexOf("</head>");
               if (idx !== -1) {
                 injected = true;
-                const out = str.slice(0, idx) + stateScript + str.slice(idx);
+                const out = str.slice(0, idx) + injectString + str.slice(idx);
                 callback(null, out);
                 return;
               }
@@ -49,11 +51,7 @@ const renderDefault = async (request, response, next) => {
             callback(null, chunk);
           },
         });
-        try {
-          response.setHeader("content-type", "text/html");
-        } catch (error) {
-          console.error("Set-Header Context-Type text/html Error:", error);
-        }
+        response.setHeader("content-type", "text/html");
         transform.pipe(response);
         pipe(transform);
       },

package/ssr/handler.js

@@ -1,8 +1,14 @@
+import express from "express";
 import { render } from "@ssr/entryRender.jsx";
 
+const ignored = [
+  /^\/%3Canonymous%20code%3E$/,
+  /\.js\.map$/,
+  /\.css\.map$/,
+];
+
 export const handler = async (req, res, next) => {
-  //Force Fix
-  if (req.url === "/%3Canonymous%20code%3E" || req.url.endsWith(".js.map")) {
+  if (req.method !== "GET" || ignored.some((pattern) => pattern.test(req.path))) {
     return next();
   }
   try {
@@ -10,4 +16,4 @@ export const handler = async (req, res, next) => {
   } catch (error) {
     next(error);
   }
-};
+};

package/ssr/pageBrowser.jsx

@@ -1,34 +1,20 @@
 import { ErrorBoundary } from "@ssr/errorBoundary.jsx";
 import { RootRoutes } from "@ssr/rootRoutes.jsx";
-import { StrictMode, Suspense } from "react";
-import { QueryClient, QueryClientProvider, hydrate } from "react-query";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Suspense } from "react";
 import { BrowserRouter } from "react-router";
+import { SlotProvider } from "react-slotx";
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      suspense: false,
-    },
-  },
-});
-
-export const PageBrowser = ({ hydratedState = {}, setHydratedState }) => {
-  hydrate(queryClient, hydratedState);
+export const PageBrowser = ({ basename, queryClient, slotClient }) => {
   return (
-    <ErrorBoundary>
+    <ErrorBoundary suppressHydrationWarning={true}>
       <QueryClientProvider client={queryClient}>
         <Suspense>
-          <BrowserRouter
-            basename={process.env.SSR_BASENAME}
-            future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
-          >
-            <StrictMode>
-              <RootRoutes
-                hydratedState={hydratedState}
-                setHydratedState={setHydratedState}
-              />
-            </StrictMode>
-          </BrowserRouter>
+          <SlotProvider client={slotClient}>
+            <BrowserRouter basename={basename}>
+              <RootRoutes />
+            </BrowserRouter>
+          </SlotProvider>
         </Suspense>
       </QueryClientProvider>
     </ErrorBoundary>

package/ssr/pageServer.jsx

@@ -1,39 +1,22 @@
-import { ErrorBoundary } from "@ssr/errorBoundary.jsx";
-import { RootRoutes } from "@ssr/rootRoutes.jsx";
-import { StrictMode, Suspense } from "react";
-import { dehydrate, QueryClient, QueryClientProvider } from "react-query";
-import { StaticRouter } from "react-router";
-
-export const PageServer = ({ path, hydratedState, setHydratedState }) => {
-  const queryServer = new QueryClient({
-    defaultOptions: {
-      queries: {
-        suspense: true,
-      },
-    },
-  });
-  queryServer.getQueryCache().subscribe(() => {
-    const state = dehydrate(queryServer);
-    setHydratedState(state);
-  });
-  return (
-    <ErrorBoundary suppressHydrationWarning={true}>
-      <QueryClientProvider client={queryServer}>
-        <Suspense>
-          <StaticRouter
-            basename={process.env.SSR_BASENAME}
-            location={path}
-            future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
-          >
-            <StrictMode>
-              <RootRoutes
-                hydratedState={hydratedState}
-                setHydratedState={setHydratedState}
-              />
-            </StrictMode>
-          </StaticRouter>
-        </Suspense>
-      </QueryClientProvider>
-    </ErrorBoundary>
-  );
-};
+import { ErrorBoundary } from "@ssr/errorBoundary.jsx";
+import { RootRoutes } from "@ssr/rootRoutes.jsx";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { Suspense } from "react";
+import { StaticRouter } from "react-router";
+import { SlotProvider } from "react-slotx";
+
+export const PageServer = ({ basename, location, queryClient, slotClient }) => {
+  return (
+    <ErrorBoundary suppressHydrationWarning={true}>
+      <QueryClientProvider client={queryClient}>
+        <Suspense>
+          <SlotProvider client={slotClient}>
+            <StaticRouter basename={basename} location={location}>
+              <RootRoutes />
+            </StaticRouter>
+          </SlotProvider>
+        </Suspense>
+      </QueryClientProvider>
+    </ErrorBoundary>
+  );
+};

package/ssr/root.jsx

@@ -1,6 +1,7 @@
 import { LiveReload } from "@ssr/liveReload.jsx";
 import { ViteScripts } from "@ssr/viteScripts.jsx";
-import { Outlet } from "react-router";
+import { Outlet as OutletSlot } from "react-slotx";
+import { Outlet as OutletRoutes } from "react-router";
 
 export const RootDocument = () => {
   return (
@@ -8,12 +9,11 @@ export const RootDocument = () => {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite + React SSR</title>
-        <link rel="icon" href="vite.svg" type="image/svg" />
         <LiveReload />
+        <OutletSlot name="head"/>
       </head>
       <body>
-        <Outlet />
+        <OutletRoutes />
         <ViteScripts />
       </body>
     </html>

package/ssr/rootRoutes.jsx

@@ -1,7 +1,7 @@
 import { RootDocument } from "@ssr/root.jsx";
 import React from "react";
 import { useRoutes } from "react-router";
-import routes from "./routes";
+import routes from "ssr-pages";
 
 export const RootRoutes = (props) => {
   const newRoutes = [