Server Side Rendering React Using Spring Boot

Question

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')
)

Willem Liu · Accepted Answer · 2018-01-03 09:43:26Z

3

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.

answered Jan 3, 2018 at 9:43

Willem Liu

2112 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

javaWebDev Over a year ago

Thanks, I thought this was the likely case but wasn't sure.

OneCricketeer · Accepted Answer · 2022-10-28 00:20:14Z

0

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>

edited Oct 28, 2022 at 0:20

answered Oct 28, 2022 at 0:15

OneCricketeer

193k20 gold badges146 silver badges276 bronze badges

Collectives™ on Stack Overflow

Server Side Rendering React Using Spring Boot

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related