Best way to generate HTML-table with dynamic data.

Projects Programming
1

What is the best way to generate html-table (or similar content) with variable dynamic data in it for web-servers based on ESP8266 or ESP32?

I see three ways:

  1. Combine web page string with table directly in server response handler, using String class or multiple server.print(ln) to the client.

  2. Read web page template from some internal storage (such as SPIFFS) and perform multiple macro-substitution with real data on server side.

  3. Read web page template from some internal storage (such as SPIFFS) and using Java Script perform data substitution (probably, in single shot) on client side, in the browser.

I have done some simple self-explanatory sketch demonstrating all these approaches, it is here to test: link (Do not forget to upload data folder to SPIFFS storage on your board!)

Seems for me, the first approach is the worst, not flexible, hard to maintain, hard to understand. Second one seems to be most flexible, but takes longest time to process. And third one seems to be in the middle, not as flexible as second one, but works faster.

Are there any other proper (better?) ways to do it?

2

some kind of

1B) use a char array to avoid String Object.
If you must use String object, use .reserve reserve() - Arduino Reference
but anyhow, use a temporary buffer, don't use to much separate println
Use F-Makro and/or PROGMEM to keep things in Flash.

  1. if you use dynamic pages already:
    use JavaScript/AJAX/Fetch API to add content to your page
3

noiasca:
1B) use a char array to avoid String Object.
If you must use String object, use .reserve reserve() - Arduino Reference
but anyhow, use a temporary buffer, don't use to much separate println
Use F-Makro and/or PROGMEM to keep things in Flash.

What is the purpose? On Arduino uno using Strins was really problem, but on esp8266 I see no problem at all... Even with no .reserve() I did not see any memory leakage during months. So, what advantage will give me usage of char-array vs String?

noiasca:
3) if you use dynamic pages already:
use JavaScript/AJAX/Fetch API to add content to your page

Third approach already using JavaScript, I wrote it, see sketchbook sample too. What do you mean specifically? Can you give some simple sample to explain conception?