Spring Boot에서 서버 사이드 렌더링 (SSR) 구현 - JSP & Thymeleaf
🚀 1. 서버 사이드 렌더링(SSR)이란?
서버 사이드 렌더링(SSR, Server-Side Rendering)은 서버에서 HTML을 렌더링하여 클라이언트에게 전송하는 방식입니다.
- ✅ 클라이언트가 요청하면 서버에서 HTML을 생성하여 응답
- ✅ 초기 로딩 속도가 빠름 (HTML이 완전히 렌더링된 상태로 전달)
- ✅ SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리
- ✅ JavaScript 없이도 페이지가 정상적으로 보임
📌 Spring Boot에서는 SSR을 지원하는 두 가지 대표적인 템플릿 엔진
- JSP (Java Server Pages)
- Thymeleaf
📌 2. JSP 기반 SSR 구현
JSP는 Java 코드와 HTML을 함께 사용할 수 있는 템플릿 엔진으로, Servlet과 함께 동작합니다.
🚀 1️⃣ JSP를 사용한 Spring Boot 프로젝트 설정
📌 spring-boot-starter-web과 tomcat-embed-jasper 추가
📄 pom.xml
<!-- Spring Boot Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- JSP를 사용하기 위한 Jasper 라이브러리 추가 -->
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<!-- JSTL (JSP에서 반복문, 조건문 등을 사용할 수 있도록 지원) -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
</dependencies>
✅ tomcat-embed-jasper가 있어야 Spring Boot에서 JSP를 사용할 수 있음
✅ JSTL은 JSP에서 <c:forEach> 등의 문법을 사용할 때 필요
🚀 2️⃣ application.properties 설정
📄 src/main/resources/application.properties
spring.mvc.view.suffix=.jsp
✅ JSP 파일은 /WEB-INF/views/ 디렉토리에 위치해야 함
✅ .jsp 파일 확장자를 자동으로 인식하도록 설정
🚀 3️⃣ JSP 기반 컨트롤러 구현
📄 BoardController.java
import cohttp://m.example.board.model.Post;
import cohttp://m.example.board.service.PostService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.List;
@Controller // 🔹 JSP를 사용할 경우 @RestController가 아닌 @Controller 사용
@RequiredArgsConstructor
public class BoardController {
private final PostService postService;
// 🔹 게시글 목록 페이지
@GetMapping("/board")
public String boardPage(Model model) {
List<Post> posts = postService.getAllPosts();
model.addAttribute("posts", posts); // 🔹 JSP에서 사용할 데이터 추가
return "board"; // 🔹 board.jsp로 이동
}
}
✅ JSP 사용 시 @RestController가 아닌 @Controller 사용
✅ Model 객체를 사용하여 데이터를 JSP 파일에 전달
✅ return "board"; → WEB-INF/views/board.jsp를 찾음
🚀 4️⃣ JSP 파일 작성
📄 src/main/webapp/WEB-INF/views/board.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>게시판</title>
</head>
<body>
<h2>게시판 목록</h2>
<table border="1">
<tr>
<th>번호</th>
<th>제목</th>
<th>내용</th>
</tr>
<c:forEach var="post" items="${posts}">
<tr>
<td>${post.id}</td>
<td>${post.title}</td>
<td>${post.content}</td>
</tr>
</c:forEach>
</table>
</body>
</html>
✅ JSP 문법
- <%@ page contentType="text/html; charset=UTF-8" %> → 페이지 인코딩 설정
- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> → JSTL 태그 라이브러리 추가
- <c:forEach var="post" items="${posts}"> → posts 리스트를 반복하며 데이터 출력
🚀 5️⃣ JSP 실행 결과
✅ URL: http://localhost:8080/board로 접속하면 JSP 페이지에서 게시글이 렌더링됨
✅ Spring Boot에서 서버 사이드 렌더링을 JSP로 구현 완료
📌 3. Thymeleaf 기반 SSR 구현
Thymeleaf는 JSP보다 더 현대적이고 강력한 템플릿 엔진입니다.
✅ Spring Boot와 완벽하게 통합 가능
✅ HTML 파일에서 직접 Thymeleaf 문법 사용 가능
✅ JSP와 다르게 @RestController에서도 사용 가능
🚀 1️⃣ Thymeleaf를 사용하기 위한 설정
📄 pom.xml
<!-- Spring Boot Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Thymeleaf 템플릿 엔진 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
✅ Spring Boot에서는 spring-boot-starter-thymeleaf만 추가하면 자동 설정됨
🚀 2️⃣ application.properties 설정
spring.thymeleaf.suffix=.html
✅ Thymeleaf 템플릿 파일을 src/main/resources/templates/에서 찾도록 설정
✅ .html 확장자로 자동 인식
🚀 3️⃣ Thymeleaf 기반 컨트롤러 구현
📄 BoardController.java
import cohttp://m.example.board.model.Post;
import cohttp://m.example.board.service.PostService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.List;
@Controller // 🔹 Thymeleaf를 사용할 경우 @RestController가 아닌 @Controller 사용
@RequiredArgsConstructor
public class BoardController {
private final PostService postService;
@GetMapping("/board")
public String boardPage(Model model) {
List<Post> posts = postService.getAllPosts();
model.addAttribute("posts", posts);
return "board"; // 🔹 board.html을 반환
}
}
✅ JSP와 동일한 방식으로 Model을 사용하여 데이터를 Thymeleaf로 전달
✅ 반환값이 board이면 src/main/resources/templates/board.html을 찾아 렌더링
🚀 4️⃣ Thymeleaf 파일 작성
📄 src/main/resources/templates/board.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>게시판</title>
</head>
<body>
<h2>게시판 목록</h2>
<table border="1">
<tr>
<th>번호</th>
<th>제목</th>
<th>내용</th>
</tr>
<tr th:each="post : ${posts}">
<td th:text="${post.id}"></td>
<td th:text="${post.title}"></td>
<td th:text="${post.content}"></td>
</tr>
</table>
</body>
</html>
✅ th:each="post : ${posts}" → posts 리스트를 반복하며 출력
✅ th:text="${post.title}" → 해당 값이 HTML에 삽입됨
📌 4. 결론
| 설정 방법 | tomcat-embed-jasper 필요 | spring-boot-starter-thymeleaf만 필요 |
| 문법 | JSTL 사용 (<c:forEach>) | th:each 사용 |
| 실행 위치 | /WEB-INF/views/ | /templates/ |
'개발 이론 > Spring' 카테고리의 다른 글
| Spring, Spring Boot, JPA의 정의 (0) | 2025.03.01 |
|---|---|
| Spring Security (0) | 2025.02.20 |
| Spring MVC (0) | 2025.02.20 |
| Spring Boot란? (0) | 2025.02.20 |