How to use <Show> in ssr?

Hi everyone. I have this simple code:

export default function Home() {
  const [error, setShowError] = createSignal(false);
  const [_, { Form }] = createRouteAction(async (formData: FormData) => {
    const username = formData.get('username');

    if (username !== 'admin') {
      setShowError(true);
    }
  });

  return (
    <div>
      <Form>
        <label>Username</label>
        <input type="text" name="username" />
      </Form>

      <Show when={error()} keyed>
        oops, you failed
      </Show>
    </div>
  );
}

export default function Home() {
  const [error, setShowError] = createSignal(false);
  const [_, { Form }] = createRouteAction(async (formData: FormData) => {
    const username = formData.get('username');

    if (username !== 'admin') {
      setShowError(true);
    }
  });

  return (
    <div>
      <Form>
        <label>Username</label>
        <input type="text" name="username" />
      </Form>

      <Show when={error()} keyed>
        oops, you failed
      </Show>
    </div>
  );
}

Is it possible to somehow hide Show part from the downloaded js files? What I mean is, if I land on this page and have a look at the network tab, I can see that string inside one of the JS files.

11 Replies

Alex Lohr•2y ago

The easiest way would probably be to base64-encode the string.

<Show when={error()} keyed>
  {atob('b29wcywgeW91IGZhaWxlZA==')}
</Show>

<Show when={error()} keyed>
  {atob('b29wcywgeW91IGZhaWxlZA==')}
</Show>

BraviOP•2y ago

so is there no similar functionality as for example in php where I can do

<?php if .. : ?>
  <div>Hello world</div>
<?php endif; ?>

<?php if .. : ?>
  <div>Hello world</div>
<?php endif; ?>

Alex Lohr•2y ago

You want to only render this on the server?

BraviOP•2y ago

yeah. so basically what I'm trying to achieve is that I have a table, which should only be rendered for logged in users I know I can redirect users to a separate route, that renders the table and check for whether the user is logged in or not there but I wanted a simpler solution in this case

Alex Lohr•2y ago

What's the rest of your setup? are you using solid-start?

BraviOP•2y ago

yes it's literally a newly created project so I used pnpm create solid@latest SSR, TypeScript, with-tailwindcss template okay here's another example, perhaps this would be more relevant to the use case. I have a page, which should show certain elements only for logged in users

Alex Lohr•2y ago

then you might be able to pull this off with <NoHydrate>

BraviOP•2y ago

thanks, I'll look into it okay that does hide it. but now the problem is that when I submit the page, I cannot make that bit show up at all 😄 maybe I shouldn't be using a signal here 🤔

Alex Lohr•2y ago

Well, you cannot use a signal out of hydration. And you cannot show the message rendered by the server without a reload... unless you used the unstable islands. I haven't had the time to fully look into them, but I guess that could work.

BraviOP•2y ago

actually reload is fine as in, when I submit the form, it will reload the page and for the message to show up that's what you meant, correct?

Alex Lohr•2y ago

For auth, it is okay IMO, it doesn't happen very often. But solid-start has some advanced features that could allow circumventing it. However, that's as premature optimization.

Gaming

Programming

How to use <Show> in ssr?