How to render hundreds of nostr posts without breaking you app performance

When rendering a feed of nostr posts, you are likely fetching several hundreds of posts that you would like to display (considering you are using the limit property, otherwise they will be thousands).

But rendering a few hundreds cards at the same time on the DOM can cause a performance issue for your users, especially on low-end devices.

One good solution to consider is to use Windowing.

This technique means that you only render the items that are currently in the viewport (window) and a few items up & down, but for the rest of the items, you only put empty space.

So you are actually only rendering a few cards instead of hundreds at any time!

You don't have to implement this technique from scratch by yourself.

You can most likely find a good library for whatever UI framework you are using that already implements this for you.

If you are using React.Js, check out react-window & react-virtuoso.

We at bolt🔩fun use react-virtuoso for our nostr feeds.