URL 방식과 AJAX 방식을 왜 따로 쓰는 것일까?

고민을 하게 된 계기

상황

현재 회사에서는 JAVA Spring과 JSP를 이용한 서버사이드 렌더링(이하 SSR)과 JSTL 내부에서의 자바스크립트 동작을 이용한 클라이언트 사이드 렌더링(CSR)을 동시에 사용하고 있다. 기본적으로는 MPA를 기반으로 사용자에게 정보를 JAVA 백엔드에서 처리하여 HTML을 그대로 내려주지만 일부만 동적 렌더링이 필요한 경우는 그 페이지 내부에서 SPA를 처리한다.

현재까지는 React.js를 사용한 클라이언트와 Express.js를 사용한 백엔드를 구성하여 확실한 CSR의 개발만 해오던 나는 SSR과 CSR을 동시에 사용하며 정보의 처리 주체에 관한 혼선을 겪고 있었다.

의문점

jsp 파일에 Spring에서 model로 담아준 데이터를 활용하여 클라이언트에서 동적 렌더링을 해볼 순 없을까?

결론

정석적인 방법으로는 할 이유와 방법이 없다는 결론을 내렸다.

해결과정

이 개념이 헷갈렸던 가장 큰 이유는 동적렌더링을 원하는 부분의 HTML을 생성하는 주체가 누가될 것인지에 대한 결론이 명확하지 않았기 때문이었다.

1. 'model에 담아준 jsp 파일을 자바스크립트가 이용한다' 의 문제점

model에 담은 데이터를 jsp의 자바스크립트가 충분히 이용할 수 있다. jsp 파일에서는 jstl -> javascript 로 데이터가 일방향으로만 움직이기 때문이다. 따라서 일반적인 URL 요청방식을 새로 보내주어야만 서버에서 보낸 데이터를 js가 읽어낼 수 있는 것이다.

즉 자바에서 새로운 HTML을 내려줘야만하며, 이는 페이지의 재수신을 의미한다.

2. 자바스크립트가 스스로 동작하기 위해서는 그 자체적으로 동적인 신호를 보내야한다 === AJAX 방식의 HTTP request를 의미한다.

JAVA에서의 일방적인 HTML 생성 없이 자바스크립트에서 자의적으로 동작해야 하므로 자바스크립트 자체에서의 HTTP 요청(AJAX)가 필요하다. AJAX 요청으로 받은 정보를 이용하여 필요한 부분의 HTML을 '자바스크립트'가 동적으로 재생성하는 것이다.

이해한 내용의 모식도

TIL 3줄 요약

1. JSP에서의 데이터흐름 : jstl -> javascript
2. SPA에서의 HTML 생성주체 : 자바스크립트
3. MPA에서의 HTML 생성주체 : 자바 스프링(서버)

• 뭐든지 정석대로 하자