CODEWITHSUNDEEP
javareactjsspring-bootthymeleafserver-side-rendering
javaWebDev
javaWebDev

Reputation: 3

Server Side Rendering React Using Spring Boot

I was looking over the following tutorial using Spring Boot and React. https://spring.io/guides/tutorials/react-and-spring-data-rest/

Would the React be server-side rendered here, since it is being rendered into the Thymeleaf template? For context I have placed the Thymeleaf template and React file code from the tutorial below.

src/main/resources/templates/index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>ReactJS + Spring Data REST</title>
    <link rel="stylesheet" href="/main.css" />
</head>

<body>

    <div id="react"></div>

    <script src="built/bundle.js"></script>

</body>
</html>

src/main/js/app.js - rendering code

ReactDOM.render(
    <App />,
    document.getElementById('react')
)

Upvotes: 0

Views: 4470

Answers (2)

OneCricketeer
OneCricketeer

Reputation: 191844

There's no reason you cannot combine the two. Your example doesn't use any Thymeleaf templating, though, but if you did add it, and make Spring render it, then it would have both client-side ReactJS DOM components post-rendered after Spring's server-side HTML response.

As one example, you could do conditional rendering

<div id="react" th:if="some condition here"></div>
<div id="other-react" th:if="other condition here"></div>

Upvotes: 0

Willem Liu
Willem Liu

Reputation: 211

In the given example React is not rendered server-side. The Thymeleaf HTML is outputted as is. Data is fetched client-side by calling services setup in the Spring Boot backend as shown in the tutorial.

Upvotes: 3

Related Questions