andrezero Comments - Answer Overflow

andrezero

•Created by andrezero on 2/13/2024 in #support

SSR/SSG: How to share context between client and server

Got it (I hope). I wasn't familiar with the streaming architecture / flow. It does not render app first and then the document When streaming it sends the document first and then streams updates to assets, scripts and children And there is (yet) no way to stream updates to the <html> and <body> tags. 😬 Did I get it right?

11 replies

SSolidJS

•Created by andrezero on 2/13/2024 in #support

SSR/SSG: How to share context between client and server

Note: There are other business cases for having full dynamic control of the document. 🤔 This is typically achievable via the render content > render document pipeline, as in ReactHelmet ... <MetaProvider>...<Meta/>. ❓ Is there anything fundamental / architectural that I'm missing that prevents generalising this approach so that one could do something like

type DocumentProps = {
  assets: JSX.Element;
  children: JSX.Element;
  scripts: JSX.Element;
}

type MyDocumentProps = DocumentProps & {
  lang: string;
  bodyClasses: string[];
  faviconIrl: string;
  arbitraryHeadStuff: JSX.Element;
};

const Document: Component<MyDocumentProps> = props => {
  return (
    <html lang={props.lang}>
      <head>
        <link rel="icon" href={props.faviconUrl} />
        {props.assets}
        {props.arbitraryHeadStuff}
      </head>
      <body class={props.bodyClasses}>
        <div id="app">{props.children}</div>
        {props.scripts}
        ...
      </body>
    </html>
  );
};

type DocumentProps = {
  assets: JSX.Element;
  children: JSX.Element;
  scripts: JSX.Element;
}

type MyDocumentProps = DocumentProps & {
  lang: string;
  bodyClasses: string[];
  faviconIrl: string;
  arbitraryHeadStuff: JSX.Element;
};

const Document: Component<MyDocumentProps> = props => {
  return (
    <html lang={props.lang}>
      <head>
        <link rel="icon" href={props.faviconUrl} />
        {props.assets}
        {props.arbitraryHeadStuff}
      </head>
      <body class={props.bodyClasses}>
        <div id="app">{props.children}</div>
        {props.scripts}
        ...
      </body>
    </html>
  );
};

and then something like

export default createHandler<MyDocumentProps>(() => (
    <StartServer document={props) => <Document {...props} />
));

export default createHandler<MyDocumentProps>(() => (
    <StartServer document={props) => <Document {...props} />
));

11 replies

SSolidJS

•Created by andrezero on 2/13/2024 in #support

SSR/SSG: How to share context between client and server

Thanks for answering. I was suspecting/fearing this 😬 The (technical) use case(s) are indeed to have control over <html/body class> and/or style and inject <style tags> and/or other assets into the document based on route/context. Two business cases for this, that I have encountered recently - multi-brand design systems - A/B testing design system iterations - "theme" variations based on feature flags In these scenarios, the SSR time rendering is a requirement to prevent "flashes of..." and to guarantee overall 🎩 tip top core metrics and user experience.

11 replies

SSolidJS

•Created by andrezero on 2/13/2024 in #support

SSR/SSG: How to share context between client and server

Easy to reproduce adding these 3 files to the Solid Start basic template.

11 replies

SSolidJS

•Created by andrezero on 5/30/2023 in #support

How to read reactive state from imperative contexts (audio/music)

@bigmistqke your squencer is cool af 😎 great UI there

18 replies

SSolidJS

•Created by andrezero on 5/30/2023 in #support

How to read reactive state from imperative contexts (audio/music)

@bigmistqke and @adoublef great resources, great projects! Tahti is cool as well and their solid knobs - real solid knobs, pun intended - is open source https://github.com/tahti-studio/solid-knobs The main focus of my project is TIME My main use case is building the ultimate metronome for musical practice. So far, I have built an alternative Transport service to Tone so that I can have a timeline as you have on your typical DAW with tempo and signature changes (Tone doesn't allow this as it recalculates your current position once you change signature). It's going amazingly well thanks to the simplicity of Solid

18 replies

SSolidJS

•Created by andrezero on 5/30/2023 in #support

How to read reactive state from imperative contexts (audio/music)

Thank you! Doubling down on my approach and having a really good time right now 😸

18 replies

Gaming

Programming