SolidJS•4mo ago

Solid way to Show components based on information from the session or cookies or server only data?

With RSC, our team is used to use data available only in the server in the context of a request, like from headers, cookies, or even server only string arrays. For example:

const updates300 = ["user1", "user2", "user3"];

export default async function Home() {
  const user = await getUserOrRedirect();

  return (
    <div className="flex flex-col items-center justify-center p-4">
      <H1 className="text-center">Welcome {user.fullName}</H1>
    {updates300.includes(user.userId) && <Update300 />}
    ...
    </div>
  )
}

const updates300 = ["user1", "user2", "user3"];

export default async function Home() {
  const user = await getUserOrRedirect();

  return (
    <div className="flex flex-col items-center justify-center p-4">
      <H1 className="text-center">Welcome {user.fullName}</H1>
    {updates300.includes(user.userId) && <Update300 />}
    ...
    </div>
  )
}

Is there a "solid way" to do this in solid start? Or we should just use createResource and a server actions? I'm hoping there is a way to run code only on the server without it being a server action.

11 Replies

AngelelzOP•4mo ago

the function getUserOrRedirect gets the user from the Auth cookie

brenelz•4mo ago

Extract the getUserOrRedirect into a server function and use createAsync

AngelelzOP•4mo ago

Does createAsync make the server function not run on the client?

brenelz•4mo ago

No you add a "use server" to the async function that createAsync calls https://docs.solidjs.com/solid-start/building-your-application/data-loading#data-loading-always-on-the-server

AngelelzOP•4mo ago

Thank you, I just don’t understand the difference between createAsync and createResource

brenelz•4mo ago

I think the idea is you could build createResource from createAsync createAsync is a newer primitive

AngelelzOP•4mo ago

Understood, I was hoping of a way to pause render on the server until the resource resolves, just like RSC. Not looking for a loading state, but it’s for asynchronous data that loads fast enough that can be awaited for during the request cycle

brenelz•4mo ago

You could use deferStream maybe? https://docs.solidjs.com/reference/basic-reactivity/create-resource#v140

Alex Lohr•4mo ago

There is @solid-primitives/storage, which features an isomorphic cookieStorage that also works on solid-start server side.

AngelelzOP•4mo ago

Thanks for the suggestion, that would work great for stuff like theme or user preferences, but it's a security risk for parsing and verification of auth cookies with JWTs. Which is what getUserOrRedirect does. I don't think the primitives I'm looking for exists in solid just yet, and that's ok, we just need to change our data flow mental model I was looking into <NoHydration > which seemed promising for what we needed, but it doesn't seem like it's possible to use a <Hydration > component inside a <NoHydration >, so it's all or nothing for that part of the tree. I've read several posts from Ryan about partial hydration, so it seems like it's something in his mind and possibly coming soon. That will be exactly what we need, render on the server and then only hydrate the parts that need to be interactive. Skip the rendering logic on the client on the parts that are "server only"

ryansolid•4mo ago

This.

Gaming

Programming

Solid way to Show components based on information from the session or cookies or server only data?