SolidJS•7mo ago

"use server"; Help

I'm trying to understand how "use server"; works. Is it safe to assume that everything under "use server"; runs on the server (of course scope dependent). So, inside of the following function, only console.log(message); could run on the server.

const logHello = async (message: string) => {
  "use server";
  console.log(message);
};

const logHello = async (message: string) => {
  "use server";
  console.log(message);
};

However, when you call "use server"; at the top of a file, like in the server.ts file in the with-auth example, then all code runs on the server. Excerpt from the server.ts file from the with-auth example project.

"use server";
import { redirect } from "@solidjs/router";
import { useSession } from "@solidjs/start/server";
import { getRequestEvent } from "solid-js/web";
import { db } from "./db";

function validateUsername(username: unknown) {
  if (typeof username !== "string" || username.length < 3) {
    return `Usernames must be at least 3 characters long`;
  }
}

function validatePassword(password: unknown) {
  if (typeof password !== "string" || password.length < 6) {
    return `Passwords must be at least 6 characters long`;
  }
}

"use server";
import { redirect } from "@solidjs/router";
import { useSession } from "@solidjs/start/server";
import { getRequestEvent } from "solid-js/web";
import { db } from "./db";

function validateUsername(username: unknown) {
  if (typeof username !== "string" || username.length < 3) {
    return `Usernames must be at least 3 characters long`;
  }
}

function validatePassword(password: unknown) {
  if (typeof password !== "string" || password.length < 6) {
    return `Passwords must be at least 6 characters long`;
  }
}

I'm asking because the docs say... "To create a function that only runs on the server, pass a function as a parameter to server$." But I don't see any usage of server$ in the example projects. Thanks, Chris

3 Replies

bigmistqke 🌈•7mo ago

server$() was the previous convention of creating server functions. Very possible docs aren't yet completely up to date.

Birk Skyum•7mo ago

@ChrisThornham you've understood how use server; works correctly. In case the docs are obsolete, i know Ryan went through this in detail somewhere in a recent stream as well titled SolidStart on YouTube

ChrisThornham•7mo ago

Thanks for the heads up! @Birk Skyum I've been working on this more, and I'm not getting the expected behavior. I'm using Supabase, and I've set up a supabaseConfig.ts file that creates a supabase client with a secret_key. Here it is:

import { createClient } from "@supabase/supabase-js";

// client-side supabaseClient
export const supabase = createClient(import.meta.env.VITE_SUPABASE_PROJECT_URL, import.meta.env.VITE_SUPABASE_PUBLIC_API_ANON_KEY);

// server-side supabaseClient
"use server";
export const supabaseServer = createClient(import.meta.env.VITE_SUPABASE_PROJECT_URL, "secret_key", {
  auth: {
    autoRefreshToken: false,
    persistSession: false
  }
});

import { createClient } from "@supabase/supabase-js";

// client-side supabaseClient
export const supabase = createClient(import.meta.env.VITE_SUPABASE_PROJECT_URL, import.meta.env.VITE_SUPABASE_PUBLIC_API_ANON_KEY);

// server-side supabaseClient
"use server";
export const supabaseServer = createClient(import.meta.env.VITE_SUPABASE_PROJECT_URL, "secret_key", {
  auth: {
    autoRefreshToken: false,
    persistSession: false
  }
});

My expectation is that everything below "use server"; would not be visible to the client, but that's not the case. If I run npm run dev and inspect the network tab, I can see all of the content in my supabaseConfig.ts file, even the content below "use server"; Am I not using "use server"; correctly? Thanks, Chris To give a bit more context, here's what I see in the network tab inside of my supabaseConfig.ts file.

import.meta.env = {
    "VITE_SUPABASE_PROJECT_URL": "example.supabase.co",
    "VITE_SUPABASE_PUBLIC_API_ANON_KEY": "public_key",
    "BASE_URL": "/_build",
    "MODE": "development",
    "DEV": true,
    "PROD": false,
    "SSR": false
};
import.meta.env.MANIFEST = globalThis.MANIFEST;
import.meta.env.ROUTER_NAME = "client";
import.meta.env.ROUTER_HANDLER = "src/entry-client.tsx";
import.meta.env.CWD = "/project/path";
import.meta.env.ROUTERS = ["server-fns", "client", "public", "ssr"];
import.meta.env.DEVTOOLS = false;
import.meta.env.START_ISLANDS = false;
import.meta.env.SSR = false;
import.meta.env.START_SSR = true;
import {createClient} from "/_build/node_modules/.vite/deps/@supabase_supabase-js.js?v=621ce6a3";
export const supabase = createClient(import.meta.env.VITE_SUPABASE_PROJECT_URL, import.meta.env.VITE_SUPABASE_PUBLIC_API_ANON_KEY);
"use server";
export const supabaseServer = createClient(import.meta.env.VITE_SUPABASE_PROJECT_URL, "secret_key", {
    auth: {
        autoRefreshToken: false,
        persistSession: false
    }
});

import.meta.env = {
    "VITE_SUPABASE_PROJECT_URL": "example.supabase.co",
    "VITE_SUPABASE_PUBLIC_API_ANON_KEY": "public_key",
    "BASE_URL": "/_build",
    "MODE": "development",
    "DEV": true,
    "PROD": false,
    "SSR": false
};
import.meta.env.MANIFEST = globalThis.MANIFEST;
import.meta.env.ROUTER_NAME = "client";
import.meta.env.ROUTER_HANDLER = "src/entry-client.tsx";
import.meta.env.CWD = "/project/path";
import.meta.env.ROUTERS = ["server-fns", "client", "public", "ssr"];
import.meta.env.DEVTOOLS = false;
import.meta.env.START_ISLANDS = false;
import.meta.env.SSR = false;
import.meta.env.START_SSR = true;
import {createClient} from "/_build/node_modules/.vite/deps/@supabase_supabase-js.js?v=621ce6a3";
export const supabase = createClient(import.meta.env.VITE_SUPABASE_PROJECT_URL, import.meta.env.VITE_SUPABASE_PUBLIC_API_ANON_KEY);
"use server";
export const supabaseServer = createClient(import.meta.env.VITE_SUPABASE_PROJECT_URL, "secret_key", {
    auth: {
        autoRefreshToken: false,
        persistSession: false
    }
});

Gaming

Programming

"use server"; Help