fix: getServerSideProps fails when a file request match a router path pattern

LiasCode · LiasCode · commit 51550289e8b8 · 2025-08-25T00:56:03.000-04:00
diff --git a/examples/basic/src/components/Header.tsx b/examples/basic/src/components/Header.tsx
@@ -36,6 +36,16 @@ export function Header() {
               Products 2
             </a>
           </li>
+
+          <li>
+            <a
+              href="/products/3/agustin"
+              className="text-white hover:text-indigo-200 transition-colors font-medium"
+            >
+              Product/:id/:name
+            </a>
+          </li>
+
           <li>
             <a
               href="/not-found"
diff --git a/packages/pranx/src/client/ServerSidePage.tsx b/packages/pranx/src/client/ServerSidePage.tsx
@@ -14,13 +14,13 @@ export const ServerSidePage = (props: PropsWithChildren & { route_data: HydrateD
       const abortController = new AbortController();
 
       try {
-        const props_result = await ofetch<{ props: Record<string, any> }>(props.route_data.path, {
-          method: "GET",
-          query: {
-            props: true,
-          },
-          signal: abortController.signal,
-        });
+        const props_result = await ofetch<{ props: Record<string, any> }>(
+          props.route_data.server_data_api_url,
+          {
+            method: "GET",
+            signal: abortController.signal,
+          }
+        );
 
         set("props", props_result.props);
       } catch (error) {
diff --git a/packages/pranx/src/cmd/build.ts b/packages/pranx/src/cmd/build.ts
@@ -3,6 +3,7 @@ import { logger } from "@/utils/logger.js";
 import { measureTime } from "@/utils/time-perf.js";
 import fse from "fs-extra";
 import kleur from "kleur";
+import crypto from "node:crypto";
 import { join } from "pathe";
 import { Fragment, h } from "preact";
 import { renderToStringAsync } from "preact-render-to-string";
@@ -147,6 +148,7 @@ path: ${final_path}`);
         css: [css_output.entry, css_output[final_path] || ""].filter(Boolean),
         static_generated_routes: [],
         absolute_module_path: module_path,
+        server_data_api_key: "",
       });
 
       for (const static_path of static_paths_result.paths) {
@@ -197,6 +199,7 @@ params returned by getStaticPaths: ${JSON.stringify(static_path.params)}`);
       module: pages_relative_path,
       props: statics_fn_result.props,
       rendering_kind: isStatic ? "static" : "server-side",
+      server_data_api_key: crypto.randomUUID(),
       revalidate: statics_fn_result.revalidate || -1,
       static_generated_routes: [],
       is_dynamic: isUrlDynamic,
@@ -216,6 +219,7 @@ params returned by getStaticPaths: ${JSON.stringify(static_path.params)}`);
         css: r.css,
         is_dynamic: r.is_dynamic,
         path_parsed_for_routing: filePathToRoutingPath(r.path),
+        server_data_api_url: `/_internal_/${r.server_data_api_key}`,
         static_generated_routes: r.static_generated_routes.map((r) => {
           return {
             path: r.path,
diff --git a/packages/pranx/src/cmd/start.ts b/packages/pranx/src/cmd/start.ts
@@ -10,14 +10,21 @@ import { generate_html_template } from "@/build/generate_html_template.js";
 import { logger } from "@/utils/logger.js";
 import { measureTime } from "@/utils/time-perf.js";
 import fse from "fs-extra";
-import { defineHandler, H3, html, serve, serveStatic } from "h3";
+import {
+  defineHandler,
+  type EventHandlerRequest,
+  H3,
+  type H3Event,
+  html,
+  serve,
+  serveStatic,
+} from "h3";
 import kleur from "kleur";
 import { readFile, stat } from "node:fs/promises";
-import { join, resolve } from "pathe";
+import { extname, join, resolve } from "pathe";
 import { Fragment, h } from "preact";
 import { renderToStringAsync } from "preact-render-to-string";
 import type { HYDRATE_DATA, PageModule, SERVER_MANIFEST, ServerEntryModule } from "types/index.js";
-import * as ufo from "ufo";
 
 export async function start() {
   measureTime("pranx-start");
@@ -39,93 +46,69 @@ export async function start() {
       const { default: page, getServerSideProps } = (await import(file_absolute)) as PageModule;
 
       const hydrate_data = (await fse.readJSON(SITE_MANIFEST_OUTPUT_PATH)) as HYDRATE_DATA;
+      const url_for_routing_match = filePathToRoutingPath(route.path, false);
 
       app.on(
         "GET",
-        filePathToRoutingPath(route.path, false),
-        defineHandler({
-          middleware: [],
-          meta: {},
-          handler: async (event) => {
-            const url_parsed = ufo.parseURL(event.req.url);
-            const params = new URLSearchParams(url_parsed.search);
-            const return_only_props = Boolean(params.get("props"));
-
-            let props_to_return = {};
-
-            if (getServerSideProps) {
-              props_to_return = await getServerSideProps();
-            }
-
-            if (return_only_props) {
-              return {
-                props: props_to_return,
-              };
-            }
-
-            const target_route_index = hydrate_data.routes.findIndex((r) => r.path === route.path);
-
-            if (target_route_index === -1 || !hydrate_data.routes[target_route_index]) {
-              logger.error(`Route not found in hydrate data: ${route.path}`);
-              event.res.status = 500;
-              return html(event, "Internal Server Error");
-            }
-
-            hydrate_data.routes[target_route_index].props = props_to_return;
-
-            const page_prerendered = await renderToStringAsync(
-              h(server_entry_module?.default || Fragment, {}, h(page, props_to_return, null))
-            );
-
-            const html_string = generate_html_template({
-              page_prerendered,
-              hydrate_data_as_string: JSON.stringify(hydrate_data),
-              minify: true,
-              css: route.css,
-            });
-
-            event.res.headers.set("Content-Type", "text/html");
-
-            return html(event, html_string);
-          },
-        })
-      );
-    }
-  }
+        url_for_routing_match,
+        defineHandler(async (event) => {
+          // For files that match with dynamic routes
+          if (extname(event.url.pathname.split("/").at(-1) || "")) {
+            return createServeStatic(event);
+          }
+
+          let props_to_return = {};
+
+          if (getServerSideProps) {
+            props_to_return = await getServerSideProps();
+          }
 
-  app.on("GET", "**", (event) => {
-    return serveStatic(event, {
-      indexNames: ["/index.html"],
+          const target_route_index = hydrate_data.routes.findIndex((r) => r.path === route.path);
 
-      getContents: async (id) => {
-        const target_file = join(OUTPUT_BUNDLE_BROWSER_DIR, id);
-        const target_public_file = join(PUBLIC_USER_DIR, id);
+          if (target_route_index === -1 || !hydrate_data.routes[target_route_index]) {
+            logger.error(`Route not found in hydrate data: ${route.path}`);
+            event.res.status = 500;
+            return html(event, "Internal Server Error");
+          }
 
-        const existsTargetFile = await fse.exists(target_file);
+          hydrate_data.routes[target_route_index].props = props_to_return;
 
-        const buffer = await readFile(existsTargetFile ? target_file : target_public_file);
+          const page_prerendered = await renderToStringAsync(
+            h(server_entry_module?.default || Fragment, {}, h(page, props_to_return, null))
+          );
 
-        return new Uint8Array(buffer);
-      },
+          const html_string = generate_html_template({
+            page_prerendered,
+            hydrate_data_as_string: JSON.stringify(hydrate_data),
+            minify: true,
+            css: route.css,
+          });
 
-      getMeta: async (id) => {
-        const target_file = join(OUTPUT_BUNDLE_BROWSER_DIR, id);
-        const target_public_file = join(PUBLIC_USER_DIR, id);
+          event.res.headers.set("Content-Type", "text/html");
 
-        const existsTargetFile = await fse.exists(target_file);
+          return html(event, html_string);
+        })
+      );
 
-        const stats = await stat(existsTargetFile ? target_file : target_public_file).catch(
-          () => {}
-        );
+      app.on(
+        "GET",
+        `/_internal_/${route.server_data_api_key}`,
+        defineHandler(async () => {
+          let props_to_return = {};
 
-        if (stats?.isFile()) {
-          return stats;
-        }
+          if (getServerSideProps) {
+            props_to_return = await getServerSideProps();
+          }
 
-        return undefined;
-      },
-    });
-  });
+          return {
+            props: props_to_return,
+          };
+        })
+      );
+    }
+  }
+
+  app.on("GET", "**", (event) => createServeStatic(event));
 
   const SERVER = serve(app, { port: PORT });
 
@@ -135,3 +118,34 @@ export async function start() {
 
   logger.success(`Start in ${START_TIME} ms`);
 }
+
+const createServeStatic = (event: H3Event<EventHandlerRequest>) =>
+  serveStatic(event, {
+    indexNames: ["/index.html"],
+
+    getContents: async (id) => {
+      const target_file = join(OUTPUT_BUNDLE_BROWSER_DIR, id);
+      const target_public_file = join(PUBLIC_USER_DIR, id);
+
+      const existsTargetFile = await fse.exists(target_file);
+
+      const buffer = await readFile(existsTargetFile ? target_file : target_public_file);
+
+      return new Uint8Array(buffer);
+    },
+
+    getMeta: async (id) => {
+      const target_file = join(OUTPUT_BUNDLE_BROWSER_DIR, id);
+      const target_public_file = join(PUBLIC_USER_DIR, id);
+
+      const existsTargetFile = await fse.exists(target_file);
+
+      const stats = await stat(existsTargetFile ? target_file : target_public_file).catch(() => {});
+
+      if (stats?.isFile()) {
+        return stats;
+      }
+
+      return undefined;
+    },
+  });
diff --git a/packages/pranx/types/index.d.ts b/packages/pranx/types/index.d.ts
@@ -77,6 +77,7 @@ export type ServerManifestRoute = {
   is_dynamic: boolean;
   dynamic_params: Array<string>;
   css: string[];
+  server_data_api_key: string;
 };
 
 export type SERVER_MANIFEST = {
@@ -93,6 +94,7 @@ export type HydrateDataRoute = {
   css: string[];
   path_parsed_for_routing: string;
   static_generated_routes: Array<{ path: string; props: Record<string, any> }>;
+  server_data_api_url: string;
 };
 
 export type HYDRATE_DATA = {
