S
SolidJS•4w ago
InvaderToast348

Solved: Vinxi `getRequestURL` forces SRR even when wrapped in `isServer` / `import.meta.env.SSR`

import { isServer } from "solid-js/web";
import { createForm, Field, Form } from '@formisch/solid';
import { getRequestURL } from "vinxi/http";

export default function LoginPage() {
  const loginForm = createForm({...});

  if (isServer) { // or import.meta.env.SSR
    console.log(getRequestURL());
  }

  return <Form of={loginForm} onSubmit={clientSubmitHandler} method="post">...</Form>
}
import { isServer } from "solid-js/web";
import { createForm, Field, Form } from '@formisch/solid';
import { getRequestURL } from "vinxi/http";

export default function LoginPage() {
  const loginForm = createForm({...});

  if (isServer) { // or import.meta.env.SSR
    console.log(getRequestURL());
  }

  return <Form of={loginForm} onSubmit={clientSubmitHandler} method="post">...</Form>
}
- Without the getRequestURL call, the page loads and form submits happen via RPC (/_server) - With the getRequestURL, even though it is wrapped in a server-side check (so it only happens during SSR but not on client hydration / re-renders); the browser shows a POST request to the route when submitting the form and the page reloads However, calling a custom function which contains "use server" works fine - the client sends a RPC call and no issues It's specifically getRequestURL that's interacting weirdly with how pages should be rendered - server/client side Please could I have some help? For reference, 
import * as v from 'valibot';

type TLoginFormSchemaOutput = v.InferOutput<TLoginFormSchema>;

async function serverSubmitHandler(formData: TLoginFormSchemaOutput) {
  "use server";
  console.log("serverSubmitHandler", formData);
  return v.safeParse(LoginFormSchema, formData);
}

const clientSubmitHandler = async (formData: TLoginFormSchemaOutput) => {
  const serverHandlerResult = await serverSubmitHandler(formData);
  console.log("clientSubmitHandler", serverHandlerResult);
};
import * as v from 'valibot';

type TLoginFormSchemaOutput = v.InferOutput<TLoginFormSchema>;

async function serverSubmitHandler(formData: TLoginFormSchemaOutput) {
  "use server";
  console.log("serverSubmitHandler", formData);
  return v.safeParse(LoginFormSchema, formData);
}

const clientSubmitHandler = async (formData: TLoginFormSchemaOutput) => {
  const serverHandlerResult = await serverSubmitHandler(formData);
  console.log("clientSubmitHandler", serverHandlerResult);
};
I'm only just getting started with solid & solidstart, and AI has no idea what it's talking about, completely making up imports for functions that don't exist like useRouteData and createServerFunction$
1 Reply
InvaderToast348
InvaderToast348OP•4w ago
getRequestEvent()?.request.url works as intended, I'll stay clear of the vinxi functions where possible to avoid this forced-SRR behavior

Did you find this page helpful?