bigblind Posts - Answer Overflow

bigblind

•Created by bigblind on 5/30/2024 in #support

Deploying static site + hosted functions

Maybe I'm missing something, but I'm wondering why frameworks like SolidStart and NextJS don't support deploying static builds with some dynamic backend functions. Many hosting environments (firebase hosting, Netlify, render.io, ...) support both serving static files, as well as running functions, so it'd be cool if a framework could support this. This could be done by configuring a route prefix, and all of the routes matching that prefix will be part of the server build, all other routes would be part of the static build. The hosting environment can then be configured to pass any requests with that prefix to the backend, and use the static assets for all the rest.

3 replies

SSolidJS

•Created by bigblind on 2/10/2024 in #support

Best practices for reactively updating a store

I know you can use derived signals in SolidJS, but, is there a way to somehow make a store "derive" from a signal? The only way I can see to do this would be in an effect, but the effect docs say that it's not meant for functions that write reactive state. More specifically, I have a resource, and once that loads, I'd like to put it in the store. If that's a bad idea, is there some other way to have Suspense track an asynchronous operation that updates a store?

6 replies

SSolidJS

•Created by bigblind on 2/5/2024 in #support

Prevent re-fetching resource after pageload with SSR setup

I have a resouce that I'm fetching in an SSR application.

export function getRawArticle() {
    return createResource<RawArticle | null>( async () => {
        const slug = createSlug();

        if (import.meta.env.SSR) {
            try {

                return await getOrCreateArticle(slug)
            } catch(e) {
                console.error(e);
                return null
            }
        } else {
            return await getArticle(slug);
        }
    }, {
        name: "article",
        deferStream: true
    })
}

export function getRawArticle() {
    return createResource<RawArticle | null>( async () => {
        const slug = createSlug();

        if (import.meta.env.SSR) {
            try {

                return await getOrCreateArticle(slug)
            } catch(e) {
                console.error(e);
                return null
            }
        } else {
            return await getArticle(slug);
        }
    }, {
        name: "article",
        deferStream: true
    })
}

So what this does is on the server side, if this resource is accessed, it checks firestore and if a document with the slug doesn't exist, it creates one, returning it. On the client-side, I don't want to write to the firestore, so if I fetch there, I only try reading, and if it doesn't exist, the resource returns null. I'm rendering this app on the server with renderToStringAsync, so I'd expect it to wait for the resource to load. However, when I load the page, the resource's contents don't seem to be there. I can see from logs that the fetch happens successfully on the server, but also that the fetcher is called again on the client. The problem is that firebase doesn't reflect the write yet, so it doesn't find the document. What could I be missing? Could it be that this null value from the client fetcher result is overwriting the value returned by the fetcher on the server-side? Is there a way I can prevent it from being re-fetched client side if we already have a value from SSR? For completeness sake, here's the component where I'm using it:

export default function App() {
  const [ar, _actions] =  getRawArticle()
  

  return <>
    <h1>{ar()?.title}</h1>
    <div innerHTML={ar()?.body}></div>
  </>
}

export default function App() {
  const [ar, _actions] =  getRawArticle()
  

  return <>
    <h1>{ar()?.title}</h1>
    <div innerHTML={ar()?.body}></div>
  </>
}

2 replies

Gaming

Programming