Reactive rendering in .astro files

[twin dirge]

Hey there! I'm trying to render a certain amount of data once the user did some actions.
To store the data I'm using nanostore. How can I render data in my index.astro file once the store has changed?

Right now I'm trying it like this:

          <div id="data-par" class="w-full h-full bg-weiss rounded-2xl p-4 flex flex-col gap-4">
            {$services.listen(service => <Datacard service={service.values.name} data={data}/>)}
          </div>

But it doesn't render anything, once the data changed. Although the console log is triggered by subscribing to the store..
Hope, anybody can help!

[spark vapor]

You'll never be able to do such thing, because Astro syntax is purely for backend! You'll have to resort to a ui framework most likely

[twin dirge]

I see. So set up the box in which I want to render the components as a Vue/React component?

[spark vapor]

Yeah you'll probably want a client:load directive as well

[worldly flint]

Just dropping by to recommend Solid JS :>

[quasi rapids]

If your app is really minimal, I recommend Alpine