Programuje hobbystycznie dlatego proszę o wyrozumiałość.
Jestem w trakcie pisania aplikacji IoT, która ma umożliwiać pobieranie informacji z micokontrollerów, ale również sterować nimi.
Kupiłem taki template jak poniżej w linku.
http://symbiot4.creatingo.com/

Zleży mi na asynchronicznym wysyłaniem żądań REST. Dlatego chce wykorzystać JQuery AJAX.
Nie mam pojęcia, jakie jest podejście podczas generowania strony.
Chciałbym, aby podczas otwierania strony pobrać informacje z bazy danych i wygenerować odpowiednie div'y
Niżej kawałek html z powyżej strony.

                <div class="card active" data-unit="switch-light-4">
                  <!-- Light switch START -->
                  <div class="card-body d-flex flex-row justify-content-start">
                    <svg class="icon-sprite">
                      <use class="glow" fill="url(#radial-glow)" xlink:href="assets/images/icons-sprite.svg#glow"/>
                      <use xlink:href="assets/images/icons-sprite.svg#bulb-eco"/>
                    </svg>
                    <h5>Bedroom</h5>
                    <label class="switch ml-auto">
                      <input type="checkbox" id="switch-light-4">
                    </label>
                  </div>
                  <!-- Light switch END -->
                  <hr class="my-0">
                  <!-- Bulb details START -->
                  <ul class="list-group borderless px-1">
                    <li class="list-group-item">
                      <p class="specs">Connection</p>
                      <p class="ml-auto mb-0 text-success">OK</p>
                    </li>
                    <li class="list-group-item pt-0">
                      <p class="specs">Power Consumption</p>
                      <p class="ml-auto mb-0">15W</p>
                    </li>
                    <li class="list-group-item pt-0 pb-4">
                      <p class="specs">Voltage range</p>
                      <p class="ml-auto mb-0">110-130V</p>
                    </li>
                  </ul>
                  <!-- Bulb details END -->
                  <hr class="my-0">
                  <!-- Dimmer control - range slider START -->
                  <ul class="list-group borderless px-1" data-rangeslider="dimmer-light-4">
                    <li class="list-group-item">
                      <p class="specs">Dim</p>
                      <p class="ml-auto mb-0"><span class="range-output">65</span>%</p>
                    </li>
                    <li class="list-group-item pt-0 pb-4">
                      <input id="dimmer-light-4" type="range" min="10" max="100" value="65">
                    </li>
                  </ul>
                  <!-- Dimmer control - range slider END -->
                </div>

Czy dobrym podejściem jest połączenie JSP z AJAX?
Tzn. Strona ładowana jest przy użyciu JSP gdzie zwracam wszystkie informacje o przełącznikach i czujnikach, a wysyłanie żądań REST używając AJAX(np. zmiana stanu z off na on) ?
Chętnie obejrzałbym jakieś przykłady, w jaki sposób obecnie jest to rozwiązywane.

Czy może jednak załadować pustą stronę używając poniżej funkcji (czyli zwrócenie html), a następnie używając AJAX pobrać dane z endpoint'ów i wygenerować div'y.

    @RequestMapping(value = {"/", "/index"}, method = RequestMethod.GET)
    public String welcome(Model model) {
        return "index";
    }