Angelelz Posts - Answer Overflow

Angelelz

•Created by Angelelz on 9/3/2024 in #support

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.

18 replies

SSolidJS

•Created by Angelelz on 8/29/2024 in #support

useLocation and useNavigate in the layout?

I'm getting this stupid "<A> and 'use' router primitives can be only used inside a Route." error when I use those primitives in the Layout. This is my app.tsx:

export default function App() {
  const event = getRequestEvent();
  const [user, lll] = createResource(() => getJWTUser());
  return (
    <Router
      root={(props) => (
        <Suspense>
          <MainNav>{props.children}</MainNav>
          <ModalAndToast />
        </Suspense>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

export default function App() {
  const event = getRequestEvent();
  const [user, lll] = createResource(() => getJWTUser());
  return (
    <Router
      root={(props) => (
        <Suspense>
          <MainNav>{props.children}</MainNav>
          <ModalAndToast />
        </Suspense>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

And I'm using the A component and useNavigate inside MainNav. Is that not the solid way? What is the solid way? Thanks

44 replies

Gaming

Programming