HTTP compression (gzip, brotli) works on byte/text level and doesn't know about your markup template repetition (where structure is mostly the same but small changes everywhrere) so it will be not as efficient as manual template-data separation. Moreover you can also use gzip, brotli for your template and data so http compression doesn't change the overall picture
It changes the overall picture because HTML compresses better than JSON, which itself compresses better than your deduped arrays (because of the duplication you’re trying to avoid). So the HTML would be closer in byte size to the most compressed version you’ve shown than it appears, after compression.
^^^ this. Plus you’re probably going to have to render the JSON you send on the server and then rerender it as HTML on the client plus send the code amd template to do that too.
Also I know there’s the promise of sharing code between the front and backend but the reality is that you’re probably more likely to reimplement one or the other and then have to keep them in sync.
The overhead for doing it just the once on the backend and sending compressed HTML over the wire is pretty low for a small team in comparison.