CODEWITHSUNDEEP
javahtmlsqlthymeleaf
kane_004
kane_004

Reputation: 263

How to properly cache data in spring boot application with Thymleaf

I am writing some Java code for my Spring boot application to receive a list of 40,000 elements and, through Thymeleaf post it in a dropdown field. However, I noticed that when I load the data and go to the dropdown, everything is slow.

I was told to cache the values and store them. Though I am not too familiar with this process I tried using the @Cacheable annotation for my SpringBootApplication, but it still didn't work. I am trying to see what I did wrong or if there is a better way to approach this issue I am having.

Service Layer:

@SuppressWarnings("unchecked")
@Cacheable("String")
public List<String> getServerListing(){
    StoredProcedureQuery storedProcedure = entityManager.createStoredProcedureQuery("GetAllServers");
    return storedProcedure.getResultList();

}

First, I have a stored procedure bring down all the data from the server, (~40,000 records).

Controller:

List<String> servers = joinQueryService.getServerListing();

modelAndView.addObject("servers", servers);

Then, I set it to a List of strings and send it to front-end.

Thymeleaf:

<div class="row">
    <div class="col col-lg-9 search-bar">
        <div class="form-group">
            <label>Server:</label> <select class="js-example-basic-single3"
                th:field="*{servers}" id="selectData3">
                <option value=""></option>
                <option th:each="servers : ${servers}" th:value="${servers}" th:text="${servers}" />
            </select>

        </div>
    </div>
</div>

SpringBoot:

@SpringBootApplication
@Cacheable
public class TaddmDevApplication {

    public static void main(String[] args) {

        Policy.setPolicy(new TaddmPolicy());

        SpringApplication.run(TaddmDevApplication.class, args);
    }

}

Upvotes: 0

Views: 930

Answers (1)

andrewJames
andrewJames

Reputation: 21902

I think the problem here is: A browser will take several seconds to load and/or display such a large drop-down, regardless of how streamlined the rest of your application is.

As a test, I created a text file containing nothing except a 40,000-item drop-down (test.htm):

<!DOCTYPE html>
<html>
<body>
<h2>Create a drop-down List</h2>

<label for="widgets">Choose a widget:</label>

<select id="widgets">
  <option value="widget1">Widget 1</option>
  <option value="widget2">Widget 2</option>
  <option value="widget3">Widget 3</option>
  <option value="widget4">Widget 4</option>
  <option value="widget5">Widget 5</option>
  <option value="widget6">Widget 6</option>
  <option value="widget7">Widget 7</option>
  ... snipped for brevity!
  <option value="widget39998">Widget 39998</option>
  <option value="widget39999">Widget 39999</option>
  <option value="widget40000">Widget 40000</option>
</select>

</body>
</html>

I then opened that file in Chrome and recorded the processing time:

big select list in browser

It took about 5 seconds. There was no database fetch; no network traffic; no server-side processing.

I think the bottom line is: A drop-down of this size will be unwieldy for users, as well as being slow to handle in the browser.

This means your question becomes a different one: How to send a more modest amount of data to the browser, and allow the user to navigate through the results of each load, one page at a time. I completely agree with your goal of "milliseconds", rather than seconds, by the way. That is exactly right. Maybe you already have one, but try to have a specific goal in mind ("under 300 ms" or some such).

Of course, there may well be optimizations in your code - but they are probably moot at this point.

Probably not the answer you wanted, but I hope this helped!

Upvotes: 1

Related Questions