Prefetch using ExecuteScript#

Demo#

Explanation#

We are loading Pokemon images in a carousel. Know how much people love Pokemon, we are prefetching the images before they are needed. This way, the images are already in the browser cache when they are needed.

<div id="carousel" data-on-load="sse('/examples/prefetch/load')">

Since we have SSE we can easily load the initial page content then prefetch the images after

The interesting part of the backend (Go) is how simple it is.

examplesRouter.Get("/prefetch/load", func(w http.ResponseWriter, r *http.Request) {
  sse := datastar.NewSSE(w, r)

  // render the carousel with the first image
  sse.MergeFragmentTempl(prefetchCarousel(1))

  // create a list of URLs to prefetch
  prefetchURLs := make([]string, 0, pokemonCount)
  for i := 2; i <= pokemonCount; i++ {
    prefetchURLs = append(prefetchURLs, fmt.Sprintf(pokemonURLFormat, i))
  }
  // prefetch the images
  sse.Prefetch(prefetchURLs...)
})

So we get fast initial page load and prefetch the images after. This is a great way to make your site feel faster, especially when you know what the user is going to need next via the speculation api.

If you are interested in the details of the script that get generated and loaded, look at your head element or the Network tab in the browser dev tools.