Conflict with Thymeleaf's th:insert

Question

Conflict with Thymeleaf's th:insert

Opened this issue a year ago · 0 comments

This isn't a "bug" with this tutorial per-se, but rather a gotcha that I was trying to solve which led me to this tutorial in an effort to figure out what I was doing wrong. If this should not be recorded here, please suggest another place to put it.

Problem: Certain Thymeleaf expressions seem to cause the page to only partially load.
Solution: Add the following to the application configuration (ie: application.properties")
spring.thymeleaf.servlet.produce-partial-output-while-processing=false

In my case, my template was taking advantage of the th:replace and th:insert attributes.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="https://www.thymeleaf.org">

  <head th:replace="~{'fragments/headTagFragment'}"><title>Will Be Replaced</title></head>
  <body>
    <div th:replace="~{'fragments/navigation'}"></div>
    <form th:action="@{/contact}" th:object="${contactMessageDTO}" method="POST">
      <!-- boilerplate contact form -->
    </form>
    <div th:replace="~{'fragments/footer'}"></div>
  </body>
</html>

Experience:

When I inspected the page in the browser, I had the HTML tags and the HEAD tags, but the headTagFragment would only be partially rendered, and the degree of rendering was random.
The error messaging indicated a problem with the th:action in my form tag. This sent me down a rabbit hole looking for why the /contact endpoint could not be found.
When I removed the th:action the page would load (but of course, it would not have anywhere to submit to).
If I commented out my navigation fragment, the page would load (but it would not look as designed).

Setting the produce-partial-output-while-processing to false, forced the page to be fully created before rendering in the browser. That seems to have been key.