What about HTML Streaming?

[ghost]

Nowadays SSR is being made with async rendering which is a way rendering a page on the server waiting for data to come or finish the page logic & generate HTML, but this can inefficient & blocking because if a data latency is high or if a data to render is huge it's not good to wait to send static files & render static parts.

So There is a mechanism called HTML streaming which allows to render as we fetch a data means we don't need to block rendering waiting for a response from an API, we can start rendering the static parts & show loading spinner for dynamic data.

To see it in action test these web site that is built with solid.js, just open it, go to dev tools & set network throttlling.

https://hackernews.ryansolid.workers.dev/

https://github.com/solidjs/solid-start/tree/main/examples/hackernews-ts

I like to say that you are nanojsx is really awesome. See how fast the Deno docs site is which is built with Nanossr.
https://pagespeed.web.dev/report?url=https%3A%2F%2Fdoc.deno.land%2F

[yandeu]

Wow. I did not know that doc.deno.land was build using Nano JSX.

What you did with solidjs is also totally possible with Nano JSX.
Nano JSX is 100% isomorphic, means it work on the server and in the browser.

[jrson83]

Nano JSX uses Nano.renderSSR() function which returns an HTML string, like as an example React does with renderToString.
It does not have a React like function renderToNodeStream(). Here is a guide on Streaming Server-Side Rendering with React, on which you see that the renderToNodeStream function is different then renderToString.

If you check the solid/js docs and also the example solid/js app you posted, you can see it also supports renderToString and additionally renderToNodeStream.

So I don't think that Nano supports streams at the moment. However you could use fetch() with Suspense(), if you want to display a loading spinner (example).

For your hackernews example, even if I turn on network throttlling, I don't see any loading/spinner since the data is loading directly.

[yandeu]

Here is a stream example using nanojsx:
https://github.com/nanojsx/progressive-rendering-example

[ghost]

Thanks. I am saying this because renderToString is something problematic, it can block rendering & take some seconds to get to the user.

I am just a fan of Deno & Deno deploy, Although it's in beta 3. Today I am able to Deploy my simple site using Deno, Oak, Nano_Jsx, Tailwind css. This App makes some API calls to get a data, but it's fast enough to me & I am happy.

Just See The Site's Page Speed scores.

[yandeu]

Looks great!

renderToString (renderSSR in Nano JSX) should be very very fast.

You could also put a CDN in front of your app.

You could also try to inline your css in the html document to increase FirstContentfulPaint.

[yandeu]

I get exactly the same results (0.8s) with Nano JSX and CloudFront CDN.