For this one, x-data is the attribute that creates the Alpine component and it defines the necessary client-side state (albums) and a bespoke method for fetching the data from the server (fetchAlbums). Notice the view inside the unordered list (the ) uses some further Alpine attributes (x-for and x-text) to perform an iteration and describe how to output the state to the screen.
The state is held in x-data attributes and Alpine’s job is to take that state and ensure the UI reflects it automatically. The data from the server, as soon as it is received by Alpine’s fetch call, will be rendered by the view. Here’s what the data coming back for this example might look like:
[
{ “id”: 1, “name”: “The Dark Side of the Moon” },
{ “id”: 2, “name”: “Kind of Blue” },
{ “id”: 3, “name”: “Abbey Road” },
{ “id”: 4, “name”: “Rumours” }
]
When we compare HTMX data with Alpine’s, the difference between REST (where the representation of the state, meaning the view, is transferred) and REST-like (as commonly implemented with JSON APIs) is very clear. HTMX wants to send chunks of the actual view containing the state, and Alpine wants to send chunks of a data format (JSON) and then transform it into a view on the client.