Pre-render x-for entries

[JuroOravec]

Idea

Pre-render items for x-for, so lists managed by Alpine don't have to start empty.

Problem

I'm using AlpineJS with server-side rendering (Django). When I'm rendering lists that are not intended to change size, I can render them statically (the list is rendered as HTML).

When I want to allow users to modify a list in the UI, I delegate to AlpineJS to manage that. So I use Alpine's x-for to render out the list items.

But the problem is that when I use AlpineJS, there's that jitter on page load, when Alpine has not been loaded yet and the list is empty.

So I'd like a way to "pre-populate" a list. So that I could render the initial list of items on server-side, and then, once Alpine has been loaded, it would take over.

Workaround

The current workaround looks something like this:

<div
  x-data="{
    id: 123,
    items: [],
    initialized: false,
    init() {
      const prerenderedItems = $el.querySelectorAll(`[data-a-list-${this.id}]`);
      this.items = [...prerenderedItems].map(el => JSON.parse(el.getAttribute('data-x-item')));
      this.initialized = true;

      prerenderedItems.forEach((el) => el.remove())
    },
  }"
>
    <!-- Alpine-managed list -->
    <template x-for="(item, index) in items" :key="item.name">
      <div x-text="`This is ${item.name} (${item.age})`"></span>
    </template>

    <!-- Pre-rendered server-side list (hidden after Alpine initializes) -->
    <div data-a-list-123 data-x-item='{ "name": "John", "age": 37 }'>
      This is John (37)
    </div>
    <div data-a-list-123 data-x-item='{ "name": "Audrie", "age": 27 }'>
      This is Audrie (27)
    </div>
</div>

The items are rendered server-side, and each item contains data-x-item that describes the Alpine-side list item that should be used to render the same content.

Then, when the component is initialized, in init(), I extract the items from the pre-rendered items, and use that data to render a new list, which is now fully managed by AlpineJS (and thus allows users to add / remove items.

Once the new list is prepared, the old (server-side rendered) list can be removed.