S
SolidJS•2y ago
Bersaelor

How can I tell `solid-start` that I want most `routes` to be rendered entirely in the client

Atm, I have two applications, one is a client-side-rendered solid-start app with lot's of client data and authentication using aws. For the detail page site.com/article/{id} I have a separate solid-start project which is entirely SSR, so I can inject header-tags on the server side. Is there a way of combining those two applications? So I would have: 
routes 
  - article 
      - [id].tsx  // SSR
  [..404].tsx
  index.tsx
  settings.tsx
  account.tsx
routes 
  - article 
      - [id].tsx  // SSR
  [..404].tsx
  index.tsx
  settings.tsx
  account.tsx
except for the detail route, everything should be rendered on the client. I also have an AppState.tsx that exports a bunch of createLocalSignal similar to a createSignal just that it stores it's data in the browsers localStorage. When I convert the above CSR app to a SSR app, it keeps complaining that localStorage does not exist on the server, when clearly I don't even want the server to try to access it.
1 Reply
Bersaelor
BersaelorOP•2y ago
So @timothyallan was so nice as to explain a possible solution in #general chat: 
const ClientOnly: ParentComponent = (props) => {
  const [isMounted, setIsMounted] = createSignal(false);

  onMount(() => {
    setIsMounted(true);
  });

  return <Show when={isMounted()}>
    {props.children}
  </Show>;
}
const ClientOnly: ParentComponent = (props) => {
  const [isMounted, setIsMounted] = createSignal(false);

  onMount(() => {
    setIsMounted(true);
  });

  return <Show when={isMounted()}>
    {props.children}
  </Show>;
}
then we can have: 
return <Body>
   <Title />
   <ClientOnly> 
      <UserDetails /> // CSR
   </ClientOnly>
   <Footer>
       <StaticFooter />
       <ClientOnly>
          <UserContactForm /> // CSR
       </ClientOnly>
   </Footer>
</Body>
return <Body>
   <Title />
   <ClientOnly> 
      <UserDetails /> // CSR
   </ClientOnly>
   <Footer>
       <StaticFooter />
       <ClientOnly>
          <UserContactForm /> // CSR
       </ClientOnly>
   </Footer>
</Body>

Did you find this page helpful?