user57437: I have an esp32 which is running a web page together with a java script and using socket I update some values on the web page. I am doing this very fast (like each 50ms). Now I am serving all the html/java script code stored in a string variable but I am wondering which is the best? To store this html in spiff or in code ? and why?
Thank you very much

user37622: Best is to store static files in SPIFFS and serve them with Expires header set, to let the browser cache the html, css, js files and pictures files.
How to build the Expires header:
unsigned long expires = now() + SECS_PER_YEAR;
bp.printf(F("Expires: %s, "), dayShortStr(weekday(expires))); // two printfs because ShortStr functions share the buffer
bp.printf(F("%d %s %d 00:00:00 GMT"), day(expires), monthShortStr(month(expires)), year(expires));

And use AJAX method to show data on the page. Make the request with XMLHttpRequest object:
function getData(cmd) {
  var xhr = new XMLHttpRequest();
  xhr.onerror = function(e) {
    alert(xhr.status + " " + xhr.statusText);
  }
  xhr.onload = function(e) {
    showValues(xhr.responseText);
  };
  xhr.open("GET", "http://" + host + ":" + restPort + "/" + cmd, true);
  xhr.send();
}

showValues would be your function to fill the data into page
In ESP32 build the response as JSON for simple handling of the data in JavaScript.
Here is the WebServer in my project. It uses the basic Arduino Server class, not the esp WebServer. It has #ifdefs for SD or SPIFFS. The static files of my project including the js file are here.

57437: <p>I have an esp32 which is running a web page together with a java script and using socket I update some values on the web page. I am doing this very fast (like each 50ms). Now I am serving all the html/java script code stored in a string variable but I am wondering which is the best? To store this html in spiff or in code ? and why?
Thank you very much</p>
 37622: <p>Best is to store static files in SPIFFS and serve them with Expires header set, to let the browser cache the html, css, js files and pictures files.</p>

<p>How to build the Expires header:</p>

<pre><code>unsigned long expires = now() + SECS_PER_YEAR;
bp.printf(F("Expires: %s, "), dayShortStr(weekday(expires))); // two printfs because ShortStr functions share the buffer
bp.printf(F("%d %s %d 00:00:00 GMT"), day(expires), monthShortStr(month(expires)), year(expires));
</code></pre>

<p>And use AJAX method to show data on the page. Make the request with <code>XMLHttpRequest</code> object:</p>

<pre><code>function getData(cmd) {
  var xhr = new XMLHttpRequest();
  xhr.onerror = function(e) {
    alert(xhr.status + " " + xhr.statusText);
  }
  xhr.onload = function(e) {
    showValues(xhr.responseText);
  };
  xhr.open("GET", "http://" + host + ":" + restPort + "/" + cmd, true);
  xhr.send();
}
</code></pre>

<p><code>showValues</code> would be your function to fill the data into page</p>

<p>In ESP32 build the response as JSON for simple handling of the data in JavaScript.</p>

<p>Here is <a href="https://github.com/jandrassy/Regulator/blob/b6ef120c6f8963979268d8d17b56e5632336f317/Regulator/WebServer.ino#L22" rel="nofollow noreferrer">the WebServer in my project</a>. It uses the basic Arduino Server class, not the esp WebServer. It has <code>#ifdefs</code> for SD or SPIFFS. The static files of my project including the js file are <a href="https://github.com/jandrassy/Regulator/tree/master/Regulator/data" rel="nofollow noreferrer">here</a>.</p>
