Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce client-side Turbo Cache Control API #632

Merged
merged 2 commits into from
Jul 17, 2022

Conversation

marcoroth
Copy link
Member

@marcoroth marcoroth commented Jul 16, 2022

This Pull Request introduces a Cache class which exposes an API as Turbo.cache that can be used to control the value of the turbo-cache-control meta element form the client-side.

Most of the times you just need to the set the value of the turbo-cache-control meta element from the server-side when you are responding to your regular HTML request, based on if you want that page to be cached or not.

I encountered a few use-cases in a couple of apps I worked on where you dynamically want to set the cache control behavior after a certain action happened on the client (i.e. you don't want to show remaining artifacts of a finished animation in a later visit, but if the animation wasn't triggered you still want that page to be properly cached).

You can achieve a similar behavior by dynamically prepending a <meta> element to the <head> via JavaScript, like:

document.head.insertAdjacentHTML(
  'beforeend',
  '<meta name="turbo-cache-control" content="no-cache">'
)

Though, this feels very error-prone and doesn't account for duplicate <meta> elements in the <head>.

This Pull Request aims to simplify this by exposing a client-side API to control the value of the meta element with just the values Turbo actually knows about. With that, the above example becomes:

Turbo.cache.exemptPageFromCache()

The name of the exposed functions are kept in-line with the helpers in:
https://github.com/hotwired/turbo-rails/blob/43bf84a9b1d2cc78da6810b82f92be2c32c9dbfd/app/helpers/turbo/drive_helper.rb#L15-L23

Open Points / Design Decisions:

  • Introducing a Cache class and exposing an instance of said class as Turbo.cache might be overkill. It might be just fine to instead add the helpers as top-level functions, similar as with the Turbo.clearCache() helper.

    • Turbo.cache.exemptPageFromCache() => Turbo.exemptPageFromCache()
    • Turbo.cache.exemptPageFromPreview() => Turbo.exemptPageFromPreview()
  • The helper names exemptPageFromCache() and exemptPageFromPreview() don't exactly line up the with attribute values.

    • An alternative would be to do something like Turbo.cache.noCache() / Turbo.cache.noPreview()

This commit introduces a `Cache` class which exposes an API that can be
used to control the value of the `turbo-cache-control` meta element
form the client-side.

Most of the times you just need to the set the value of the
`turbo-cache-control` meta element from the server-side when you are
responding to your regular HTML request.

But there are some cases where you want to control the cache control
behavior from the client-side after a certain action happened on the
client (i.e. if you don't want to show remaining artefacts of an
finsihed animation).

You can achieve the same behavior by dynamically prepending a `<meta>`
element to the `<head>` via JavaScript, like:

```javascript
document.head.insertAdjacentHTML(
  'beforeend',
  '<meta name="turbo-cache-control" content="no-cache">'
)
```

Though, this feels very error-prone and doesn't account for duplicate
`<meta>` elements in the `<head>`.

This Pull Request aims to simplify this by exposing a client-side API to
control the value of the meta element.

The name of the exposed functions are kept in-line with the helpers in:
https://github.com/hotwired/turbo-rails/blob/43bf84a9b1d2cc78da6810b82f92be2c32c9dbfd/app/helpers/turbo/drive_helper.rb#L15
@marcoroth marcoroth force-pushed the client-side-cache-control-api branch from 33d80ff to ad93db2 Compare July 16, 2022 20:15
@dhh
Copy link
Member

dhh commented Jul 17, 2022

I think what you've presented here is the right trade-offs. Gathering all this in a class provides a nice namespace, and the clearer names that include page are easier to understand the meta matching ones.

@dhh dhh merged commit a54ac17 into hotwired:main Jul 17, 2022
@dhh
Copy link
Member

dhh commented Jul 17, 2022

Should get a doc PR going for 7.2.0 release too.

@marcoroth
Copy link
Member Author

I will follow up with a doc PR 👍🏼

Should we deprecate Turbo.clearCache() in favor of Turbo.cache.clear()?

@dhh
Copy link
Member

dhh commented Jul 17, 2022

Yes please 👍

marcoroth added a commit to marcoroth/turbo that referenced this pull request Jul 18, 2022
In favor of `Turbo.cache.clear()`.

Related: hotwired#632
@marcoroth marcoroth deleted the client-side-cache-control-api branch July 18, 2022 03:25
marcoroth added a commit to marcoroth/turbo that referenced this pull request Jul 18, 2022
`Turbo.clearCache()` is depreatec in favor of `Turbo.cache.clear()`

Related: hotwired#632
marcoroth added a commit to marcoroth/turbo that referenced this pull request Jul 18, 2022
`Turbo.clearCache()` is deprecated in favor of `Turbo.cache.clear()`

Related: hotwired#632
marcoroth added a commit to marcoroth/turbo-site that referenced this pull request Jul 18, 2022
dhh pushed a commit that referenced this pull request Jul 18, 2022
`Turbo.clearCache()` is deprecated in favor of `Turbo.cache.clear()`

Related: #632
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants