Differences between async and sync functions

[lordanubi]

Hi I'm still trying to understand if I got this correctly

try { Deno.statSync(cacheDir) //sync cause I first need to try stat and see if the file already exists before doing something based on this info
         //file exists let's use the cache
            return cachedVersion(cacheDir)
} catch(err) {
         //file doesn't exist lat's create cache for next requests
           render = renderSomething()
            Deno.writeTextFile(cacheDir, render, {create: true}) //create file in async way since we don't need to use it now
            return render
}

I'm not sure why but the .stat async method works as well, what's really confusing me is the try catch statement instead of a simple if (fileExists(file). But anyway to my logic I need to do that in a sync way since on that it depends the result of the try and catch, while the creation of the cached version can happen in async while the server keeps preparing the response for the client.
Any suggestions to make this more clear?
Thanks

[cjihrig]

If this is server code, you should avoid synchronous functions as much as possible once the server is handling requests. During the initial server startup, synchronous code is fine though. Synchronous code will block the event loop and prevent your server from doing anything else until the synchronous code completes (unless you're using multiple threads). Asynchronous functions will return a Promise that will either resolve or reject depending on whether or not the function is successful or not.

You should also try to avoid checking if something exists before using it (cacheDir in your example). This is a TOCTOU race condition. It's usually better to try to perform some operation, and handle the error if one happens.

what's really confusing me is the try catch statement instead of a simple if (fileExists(file)

The try...catch is there to handle any errors that are thrown by statSync() (for example if the directory does not exist).

I need to do that in a sync way since on that it depends the result of the try and catch

You can use try...catch with async/await so that you can use asynchronous code.

I would try rewriting your code to be something like this:

try {
  return cachedVersion(cacheDir)
} catch(err) {
  render = renderSomething()
  Deno.writeTextFile(cacheDir, render, {create: true})
  return render
}

[lordanubi]

First of all thanks for the really complete answer! Yes this is server side code, context is Server Side Rendering React and more exactly here I'm inside an high order component.
I asked this question exactly because I wanted to use the async version but I wasn't sure I had it the right way and I think I didn't.
The problem with the code you posted is that the cachedVersion function will return something like <img href={cacheDir} /> which won't throw any error in the server but of course will throw an error in the browser cause the file doesn't exists yet. This means that the catch block won't never be executed and the file will never be created. That's why I put the stat function there so that I can handle the case where the cached file doesn't exist yet. I chose the Stat function cause to me it seemed the most performant (i don't think it needs to go through the whole content of the file) but seems like I can't use the async function this way right?
I mean it kinda works as well but it's buggy and sometimes it will not throw an error, printing <img href={cachePath} /> even if the file is not there yet.
Any idea on how to use the async version in this situation? I don't really know what it would be best to compromise performance wise

[cjihrig]

The problem with the code you posted is that the cachedVersion function will return something like...

Yea, I'm not sure what your cachedVersion() function does under the hood. The idea is that you should try to avoid needing that statSync() call if possible due to the race condition I mentioned before. If this is code you control, you might be able to make sure that directory exists when you start the server.... but that's getting off topic.

Any idea on how to use the async version in this situation?

Here are the docs for the asynchronous Deno.stat(). There is a code snippet there that shows how to call this function by awaiting the returned Promise.

I don't really know what it would be best to compromise performance wise

Synchronous code is usually a tiny bit faster than asynchronous code because the asynchronous code has more overhead and state to maintain. However, you'd be trading a small amount of latency for a big throughput hit. A general rule of thumb is that if you ever need to do multiple things at once in a performant way (like serve HTTP requests) then you should avoid synchronous code.

[lordanubi]

Deno.readTextFile(cacheDir).then((res) => {
            return <img href={cacheDir} />
}).catch(() => {
            const render = render()
            Deno.writeTextFile(cacheDir, render, {create: true})
            return render
})

try { await Deno.stat(cacheDir)
             return <img href={cacheDir} />
} catch(err) {
            const render = render()
            Deno.writeTextFile(cacheDir, render, {create: true})
            return render
}

I tried both of these code, they worked but nothing was returned from my component, it was always empty (the file was created though)
I think that the problem here is that React renderToString is a sync function, I'm looking online regarding this problem and see if there's any suitable solution otherwise I'll just stick with sync stat version which I think should block the thread for a really short time since I'm not even opening the file!
Thanks for your precious help anyway :)

[lordanubi]

Deno.readTextFile(cacheDir).then((res) => {
            return <img href={cacheDir} />
        }).catch(() => {
            const render = render()
            Deno.writeTextFile(cacheDir, render, {create: true})
            return render
        })
        
        try { await Deno.stat(cacheDir)
             return <img href={cacheDir} />
        } catch(err) {
            const render = render()
            Deno.writeTextFile(cacheDir, render, {create: true})
            return render
        }
        

I tried both of these code, they worked but nothing was returned from my component, it was always empty (the file was created though)
I think that the problem here is that React renderToString is a sync function, I'm looking online regarding this problem and see if there's any suitable solution otherwise I'll just stick with sync stat version which I think should block the thread for a really short time since I'm not even opening the file!
Thanks for your precious help anyway :)

[lordanubi]

I think that actually React.renderToNodeStream() would be really useful here for progressive rendering but from my understanding it seems to work only on Node

[ghost]

(Apologies for being a bit late, but if you still care)

You could create a new file via Deno.open with OpenOptions { createNew: true }.
If it opened without error, then your data could not have been cached, thus you would asynchronously write into the file, otherwise returning your cached data.

Deno.open(cachedDirectory, { createNew: true }).then(
 // it wasn't cached
 (file) => {
  const renderResult = render();
  file.write(renderResult);
  return renderResult;
 },
 // it was cached
 (_error) => <img href={cacheDir} />
);