From 11549a8d2488f7b2ec85c36ca3faf3862923dfd9 Mon Sep 17 00:00:00 2001 From: Sean Doyle Date: Thu, 12 Oct 2023 13:20:47 -0400 Subject: [PATCH] Document events dispatched during preloading Documents [@hotwired/turbo#1034][] Document the `turbo:before-fetch-request` and `turbo:before-fetch-response` events dispatched during `` preloading. [@hotwired/turbo#1034]: https://github.com/hotwired/turbo/pull/1034 --- _source/handbook/02_drive.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_source/handbook/02_drive.md b/_source/handbook/02_drive.md index 5417c9e..6703a8f 100644 --- a/_source/handbook/02_drive.md +++ b/_source/handbook/02_drive.md @@ -310,5 +310,9 @@ Preload links into Turbo Drive's cache using `Hom This will make page transitions feel lightning fast by providing a preview of a page even before the first visit. Use it to preload the most important pages in your application. Avoid over usage, as it will lead to loading content that is not needed. +Note that preloaded `` elements will dispatch [turbo:before-fetch-request](/reference/events) and [turbo:before-fetch-response](/reference/events). Determine whether a `turbo:before-fetch-request` event is a preload request by checking the [Sec-Purpose:][] header (accessible from the `event.detail.fetchOptions.headers["Sec-Purpose"]` property). + It also dovetails nicely with pages that leverage [Eager-Loading Frames](/reference/frames#eager-loaded-frame) or [Lazy-Loading Frames](/reference/frames#lazy-loaded-frame). As you can preload the structure of the page and show the user a meaningful loading state while the interesting content loads.

+ +[Sec-Purpose:]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Purpose#prefetch