React와 Spring Boot를 함께 사용하는 환경에서 서버 사이드 렌더링(SSR) 구현하기...(작성중)

스프링부터와 리액트로 프로젝트를 진행하면서 기존과는 다른 경험을 하게 되어 리액트같은 SPA 언어의 동작과정에 대해서 다시 생각하는 계기가 되었습니다.

 

기존의 스프링부트로 웹사이트 구축 작업을 할때, 백엔드는 스프링부트,  프론트는 Thymeleaf 라는 자바 템플릿 엔진을 사용하여 작성된 HTML파일이나 JQuery, JavaScript 등의 스크립트 프로그래밍 언어로 작성된 JSP파일로 구현을 하게 됩니다.

 

스프링부트에서 JSP 형식의 프론트 페이지를 구현하려면 스프링부트에서 JSP 뷰 파일을 반환하는 다음과 같은 코드를 작성한 후 주소창에 http://localhost:포트번호/member/hello 를 입력하면 이 뷰 파일이 보이게 됩니다. 

 

보통 스프링부트의 컨트롤러에서 작성된 URL 아래의 메서드에서 리턴하는 뷰 파일을 화면에 호스팅하게 됩니다.

package com.example.demo.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.ui.Model;

@Controller
@RequestMapping("/member")
public class MemberController {

    @GetMapping("/hello")
    public String hello(Model model) {
        log.info("SSR테스트"); // 이 로그를 콘솔에 출력해 보자
        
        model.addAttribute("message", "Hello, Spring Boot");
        return "HelloPage"; // HelloPage 뷰 파일을 반환
    }
}

 

그 후 프론트를 리액트로 할 경우, 기존의 방식대로 프론트에서 HelloPage 라는 이름의 뷰파일을 작성 후 리액트의 라우터에서 해당 URL로 이동할 수 있도록 설정을 해줍니다.

(이 페이지에선 생략됐지만, 상위 라우터 설정이 존재하여 중간 경로인 /member/ URL을 추가해 주었습니다.)

import { Suspense, lazy } from "react";

const Loading = <div>Loading....</div>

const HelloPage = lazy(() => import("../pages/member/HelloPage"))

const memberRouter = () => {

    return [
        {
            path: "hello",
            element: <Suspense fallback={Loading}><HelloPage/></Suspense>
        }
    ]
}

export default memberRouter

 

그 후 주소창에 해당 URL 을 호출하여 해당 페이지로 이동을 해봅니다.

화면인 뷰파일은 잘 보입니다.

 

이번엔 이 뷰파일을 호스팅한 스프링부트 컨트롤러가 제대로 호출이 됐는지 콘솔에서 로그를 확인해 봅시다.

스프링부트의 이 컨트롤러가 호출이 되었다면 콘솔에 로그가 남겨졌어야 했는데 로그가 남지 않았습니다.

 

프론트인 리액트는 백엔드의 스프링부트의 컨트롤러를 통해서 뷰 파일을 호스팅한 것이 아니라는 의미입니다.

 

 

(작성중...)