As of Statamic 3.4.8, Livewire works with Statamic's Half and Full Measure static caching without any additional configuration. This is due to the concept of replacers, which takes care of replacing Livewire's CSRF token.
There is a catch, though. On the first page load, Statamic will cache the first render of the Livewire component. This can be an issue with components that display dynamic content like entries in random order. In this example, the order won't be random on subsequent page loads, but will always show in the order that it was first cached in.
If your component simply shows the latest articles in descending order, and you clear the cache whenever an entry is saved, you don't have to worry about this, though.
To get around this issue, you can use the {{ nocache }} tag around the Livewire component. This works for both Half Measure and Full Measure static caching. Just keep in mind, that you don't have much control over the loading state when using Full Measure. Learn more about this here.
If you want to use Full Measure static caching, it might be a good idea to use Livewire's Defer Loading feature instead of using the {{ nocache }} tag. This feature allows you to have more control over the loading state of the component. You could even add a loading skeleton if you wanted to.
Follow this guide to make Laravel Livewire work with Statamic's static caching. Note that this only works with Half Measure static caching. Livewire won't work with Full Measure static caching.
Exclude the Livewire endpoint from the static cache in config/statamic/static_caching.php.
'exclude' => [
'/livewire*',
],Exclude the Livewire endpoint in the VerifyCsrfToken middleware in app/Http/Middleware/VerifyCsrfToken.php.
protected $except = [
'/livewire*',
];That's it.