Spring Boot 프로젝트에서 SSR과 클라이언트 스크립트의 혼합 사용

 

웹 개발을 진행하다 보면 프론트엔드와 백엔드가 완전히 분리된 SPA(Single Page Application) 구조가 아닌, HTML, CSS, JS 파일이 모두 resources 하위에 위치한 전통적인 Spring Boot 구조를 마주하게 됩니다.

이런 구조는 일반적으로 다음과 같이 불립니다:

• 모놀리식 아키텍처(Monolithic Architecture)
• 멀티 페이지 애플리케이션(MPA)
• 서버 사이드 렌더링(SSR: Server-Side Rendering) 방식

즉, 하나의 애플리케이션에서 뷰 렌더링과 API 처리를 모두 담당하는 구조입니다. 서버가 직접 HTML을 생성해 클라이언트에 전달하고, 사용자는 요청할 때마다 새로운 HTML 페이지를 받는 방식입니다.

---

form action 기반 vs JavaScript 기반 요청

기존 SSR 방식에서는 <form action="/endpoint">을 통해 데이터를 전송하고, 서버에서 전체 HTML 페이지를 다시 렌더링해 응답합니다. 이 방식은 다음과 같은 특징이 있습니다:

• 페이지 전체가 새로고침됨
• 처리 흐름이 명확하고 서버 중심의 로직 작성에 유리함

하지만 최근에는 비동기 요청(AJAX)을 통해 필요한 데이터만 받아와 부분적으로 화면을 갱신하는 방식이 많이 사용됩니다. 예를 들어, onclick="함수()"를 사용하거나 fetch()를 통해 API를 호출하고, JSON으로 받은 데이터를 HTML 요소에 반영할 수 있습니다.

이러한 방식은 CSR(Client-Side Rendering)과 유사하지만, 전체 페이지를 렌더링하지 않고 일부분만 동적으로 갱신한다는 점에서 하이브리드 방식 혹은 진보적 향상(Progressive Enhancement)이라 부를 수 있습니다.

---

SSR 구조에서 AJAX 방식으로 구현해도 될까?

결론부터 말하자면 충분히 가능합니다. 오히려 현대적인 웹 개발에서는 서버 사이드 렌더링에 클라이언트 렌더링 일부를 혼합하는 방식이 자연스럽고 권장되는 방향입니다.

이렇게 하면:

• 초기 진입 시 SSR로 빠르게 HTML을 내려받고
• 이후 동적인 데이터 로딩은 JS로 처리하여 UX 개선

이라는 장점을 동시에 누릴 수 있습니다.

---

적용 예시

<!-- HTML 템플릿 -->
<button id="loadBtn">데이터 가져오기</button>
<div id="result"></div>

<script>
  document.getElementById('loadBtn')
    .addEventListener('click', loadData);

  async function loadData() {
    const res = await fetch('/api/example');
    const data = await res.json();
    document.getElementById('result').innerText = data.message;
  }
</script>

백엔드에서는 @RestController를 사용해 JSON 응답을 보내주면 됩니다:

@RestController
public class ApiController {
    @GetMapping("/api/example")
    public Map<String, String> example() {
        return Map.of("message", "안녕하세요!");
    }
}

---

주의할 점

• JavaScript 비활성화나 네트워크 문제에 대비해 <form> 기반의 기본 동작(fallback)을 함께 고려하는 것이 좋습니다.
• 초기 HTML 템플릿에서는 필요한 JS 파일을 꼭 포함시켜야 비동기 처리 흐름이 정상 동작합니다.

---

정리

• 현재 프로젝트 구조는 SSR 기반 MPA 아키텍처에 해당합니다.
• form action 기반 방식 외에도, JS 기반의 fetch 또는 axios를 통한 비동기 통신도 SSR 구조 안에서 충분히 활용 가능합니다.
• 서버는 초기 페이지 렌더링을 담당하고, 클라이언트에서는 필요한 데이터를 선택적으로 요청해 화면을 업데이트하는 방식은 현대적인 웹 앱에서 흔히 사용되는 전략입니다.

이처럼 SSR과 CSR을 유연하게 섞어 쓰는 하이브리드 렌더링 구조는, 사용자 경험을 높이면서도 서버 중심 아키텍처의 장점을 놓치지 않는 현실적인 해법이 될 수 있습니다.