Proposal: investigate async template rendering

[roscrl]

https://tech.ebayinc.com/engineering/async-fragments-rediscovering-progressive-html-rendering-with-marko/

Above blog does justice to this topic but I wonder if this would be possible to implement with templ or would be something separate.

[a-h]

Ah, the idea of out-of-order flushing of async fragments is quite clever.

I've been focused on the idea of using https://hotwired.dev/ to achieve similar goals, and so templ has built in support for that. Perhaps it will meet your needs?

The idea is that you compose the page out of "frames", and you can simply point a frame at a HTTP endpoint. This is managed by a small amount of client side script made by the Hotwire folks.

I made a tiny example at https://github.com/a-h/microfrontend

In the example, the src attribute on the turbo-frame is picked up by the Hotwire JavaScript library, loads the remote content, and applies it to the page.

<turbo-frame id="article" src="/article/123">
     Loading article (it takes 5 seconds)
</turbo-frame>

The web server has a route of /article which then gets invoked. As an example, I've put a 5 second wait in, so that you can see the content loading.

type articleContent struct{}

func (ac articleContent) Render(ctx context.Context, w io.Writer) error {
    _, err := io.WriteString(w, `This is the async loaded content`)
    return err
}

func articleHandler(w http.ResponseWriter, r *http.Request) {
    time.Sleep(time.Second * 5)
    turbo.ReplaceWithContext(r.Context(), w, "article", articleContent{})
}

func main() {
    h := http.NewServeMux()
    h.Handle("/article/", http.HandlerFunc(articleHandler))
    h.Handle("/", templ.Handler(home()))
    http.ListenAndServe("localhost:8000", h)
}

It's possible (and in fact, part of the design) to use Turbo streams with a web socket for remote loading of content etc.

What do you think?

[roscrl]

Brilliant, cheers the example + repo is great.

I also think turbo streams + server side events would be a great combo that I need to look into. Turbo helpers being built into templ is sweet I missed that.

Aside: what is great about using Go for the /article endpoint is that even though you are doing a sleep for 5 seconds, it will only block a goroutine and not a full thread. Not many languages have that simplicity yet and require a lot of gymnastics.

Hotwire is great, lives in the realm of Unpoly/HTMX. Paired with Stimulus and you can get very far, + templ brilliantly solves the ability to 'componentize' the frontend like you would in React/Svelte. For complex frontend apps SPA is the goto but 99% could be using this setup!