Varnish ESI for lots of small bits of information

Question

I've got a standard blog-type application with posts and users that can add those posts to their favorites.

Goals

1. When a user looks at a list of posts, they should see an indication (an image) of whether each post is a favorite. Anonymous users don't have any favorites.
2. The list of posts needs to be cached in Varnish (for both anonymous and logged-in users) because it's expensive to calculate.

Ideas

Cache the list page in Varnish and use ESI to fetch the favorites information...

1. ... for each post for the user making the current request. Downside: 50 ESI requests per page (basically the N+1 problem).
2. ... as a JSON object which is then stored on the page. On the client, this object is read and the DOM is manipulated to indicate favorites information. Downside: doesn't work for users without Javascript.
3. ... as a CSS snippet which is stored in the page. The CSS determines what to display for each post. Downside: only works for stylable content (ie, images). Not possible to display text information.

Am I missing any possibilities to accomplish what I want? Idea 3 seems to be the cleverest answer, but it wouldn't work if I also wanted to display the date the user favorited the post.

Answer 1

Answer 2 makes a lot of sense. It makes pages nicely cacheable, and only sacrifices the 'favorite functionality' for people without javascript in their browser.

Who are those people anyway? Still surfing with lynx? ;). And would they accept cookies to make your login mechanism (required for personal favorites) work in the first place, or even login at all?