[TIL, 일일 회고] 2024.10.18 - 서버 사이드 렌더링 적용하기

 

개요

프로젝트에서 토스 페이먼츠를 사용하여 결제 연동을 진행했습니다.

 

토스 페이먼츠 SDK를 사용하기 위해 웹페이지가 필요했기 때문에, Thymeleaf를 활용해 간단한 웹 페이지를 구현했습니다.

 

기존에는 클라이언트에서 HTML을 직접 조회하여 서버에서 정적 HTML 파일을 받아오는 방식을 사용했지만, 사용자 경험을 개선하기 위해 서버 사이드 렌더링으로 전환하기로 했습니다.

 

이 글에서는 이러한 과정에 대해 정리하고자 합니다.

 

서버 사이드 렌더링

서버 사이드 렌더링(SSR, Server-Side Rendering)은 웹 페이지를 서버에서 미리 렌더링하여 클라이언트(브라우저)로 HTML을 전송하는 방식입니다.

 

즉, 사용자가 웹 페이지를 요청하면 서버가 필요한 데이터를 조회하고, 그 데이터를 기반으로 완전한 HTML 페이지를 만들어 브라우저에 보내주는 과정을 의미합니다.

 

서버 사이드 렌더링의 특징

 

• 초기 로딩 속도
  • 서버에서 이미 렌더링된 HTML을 전송하기 때문에 초기 로딩 속도가 빠릅니다.
  • 사용자는 브라우저가 HTML을 받아 바로 페이지를 볼 수 있습니다.
• SEO 친화적
  • 검색 엔진 크롤러는 서버에서 렌더링된 페이지를 쉽게 읽을 수 있어, 클라이언트 사이드 렌더링에 비해 SEO(Search Engine Optimization)에 유리합니다.
• 데이터 요청 방식
  • 클라이언트가 페이지를 요청할 때마다 서버에서 데이터를 처리하고 HTML을 생성하여 응답합니다.
  • 이로 인해 클라이언트는 완전한 페이지를 받을 수 있습니다.
• 재렌더링
  • 사용자가 다른 페이지로 이동할 때마다 서버에 요청을 보내고, 새로운 HTML을 받아옵니다.

 

서버 사이드 렌더링의 과정

 

• 사용자가 특정 URL에 접근하면 서버로 요청이 전송됩니다.
• 서버는 요청을 처리하고, 필요한 데이터를 가져와 HTML 페이지를 생성합니다.
• 서버에서 생성된 HTML 페이지가 클라이언트에게 응답으로 전송됩니다.
• 브라우저는 응답받은 HTML을 렌더링하여 사용자에게 보여줍니다.

 

 

서버 사이드 렌더링 적용하기 

기존에는 사용자가 직접 HTML 파일에 접근해야 했습니다. 그러나 더 빠른 응답을 제공하고, 사용자가 쿠폰을 적용한 후 결제를 진행하는 시나리오를 고려해야 했습니다.

 

사용자는 이미 모든 결제 정보를 확인한 상태에서 결제만 진행하는 상황이므로, 이러한 경우에는 서버에서 완성된 페이지를 제공하는 서버 사이드 렌더링(SSR) 방식이 더 적합하다고 판단하여 이를 적용했습니다.

@GetMapping("/prepare")
    public ModelAndView preparePayment() {
        // payment-prepare 페이지로 이동
        ModelAndView modelAndView = new ModelAndView("payment-prepare");
        return modelAndView;
    }

 

Spring Boot에서 Thymeleaf와 같은 템플릿 엔진을 사용하여 서버 사이드 렌더링을 구현할 수 있습니다.

 

사용자가 결제 페이지를 요청할 때, 서버에서 데이터를 받아 ModelAndView를 통해 HTML 페이지를 렌더링하여 응답하는 방식이 서버 사이드 렌더링의 한 예입니다.

 

또한 서버 사이드 렌더링(Server-Side Rendering, SSR)을 구현하려면 @RestController를 사용하는 대신, @Controller를 사용해야 합니다. 

1. @RestController의 역할:
   • @RestController는 RESTful 웹 서비스를 개발할 때 주로 사용됩니다.
   • 이 애너테이션을 사용하면 모든 메서드에서 반환되는 값이 JSON 형태로 자동 변환되어 클라이언트에 응답됩니다.
   • 클라이언트에 HTML을 반환할 필요가 없는 API를 구현할 때 주로 사용합니다.
2. @Controller의 역할:
   • @Controller는 일반적인 MVC 패턴을 따르는 컨트롤러를 생성하는 데 사용됩니다.
   • 이 애너테이션을 사용하면 클라이언트의 요청에 따라 HTML 페이지를 반환할 수 있습니다.
   • 서버에서 동적으로 HTML을 생성하고 이를 클라이언트에 전달하기 위해 사용됩니다.

---

이번 프로젝트에서 서버 사이드 렌더링(SSR)을 도입함으로써 사용자 경험을 크게 향상시킬 수 있었습니다.

 

특히 초기 로딩 속도가 빨라지고, 사용자가 쿠폰을 적용한 후 결제를 진행하는 과정이 더 직관적으로 개선되었습니다.