📢 시작
필자는 일단 백엔드 언어로 스프링 프레임워크를 공부중이다. 그러나 현재 공부하는 책에서 꽤나 궁금한 내용이 나왔으나 자세한 설명을 하지 않았다. 내용은 다음과 같다
물론 최근엔 리액트나 뷰와 같은 자바스크립트 프레임워크에서 서버 사이드 렌더링을 지원하는 모습을 볼 수 있습니다만, 여기까지 이야기하기에는 책의 범위를 벗어납니다.
대신 간단하게 설명하자면, 자바스크립트 프레임워크의 화면 생성 방식을 서버에서 실행하는 것을 이야기합니다. 이는 V8 엔진 라이브러리들이 지원하기 때문이며, 스프링부트에서 사용할 수 있는 대표적인 기술들로는 Nashorn, J2V8이 있습니다.
일단 뭐가 궁금했냐.
- 내가 알고 있는 서버사이드 렌더링은 JSP, Thymeleaf 뿐인데, 뭘 말하는 거지?
- 예전에 NextJS에 대한 동영상을 봤었는데 그때 서버사이드 렌더링이 인기라고 하던게 기억났음. 그 당시에도 이게 뭔소린지 싶었으나 따로 찾아보진 않았음
- 자바스크립트는 브라우저에서 가동되기 때문에 서버는 API로만 통신하는게 아니였나??
이렇게 궁금해졌던 것이다.
그래서 열심히 GPT와 채팅하며 공부한 내용을 말해 보려고한다.. 다만 내가 스프링 프레임워크에만 익숙하고 자바스크립트나 클라이언트 경험이 조금 있을 뿐이지 NodeJS 까지의 경험은 없다보니 부정확할 수도 있다는 점 기억해주시길 바란다,.,,,
📌 서버사이드 렌더링 (SSR)이 뭐냐!
정확한 정의는 다음과 같다
서버 사이드 렌더링 (Server-Side Rendering, SSR)
서버 사이드 렌더링(SSR)은 웹 페이지의 초기 콘텐츠를 서버에서 생성하여 클라이언트에게 제공하는 방식입니다. 이로 인해 빠른 페이지 로딩과 검색 엔진 최적화(SEO) 이점을 얻을 수 있습니다. 반면, 싱글 페이지 애플리케이션(SPA)은 주로 클라이언트에서 콘텐츠를 렌더링하는데, 이는 초기 로딩 속도나 SEO 문제를 초래할 수 있습니다.
현재의 HTML 콘텐츠를 어떻게 제작하느냐를 생각하면 이해가 좀 더 쉬울 수 있다.
요즘은 HTML을 직접 작성하여 웹 페이지를 만드는 것 보다 자바스크립트를 통해서 동적으로 HTML 구조를 생성하는 방식을 많이 사용한다. 이것이 동적으로 웹사이트에 정보를 넘겨 주기에도 쉽고, 보통은 DB 조회를 통해 데이터를 활용하기 때문이다.
그러나 이 과정의 문제는 자바스크립트는 브라우저에서 작동한다는 것이다.
웹사이트 이용자 입장에서는 서버로부터 사실상 빈 HTML 파일과 자바스크립트 파일을 전달받는다. 그리고 이 자바스크립트가 브라우저를 통해 실행되고 화면이 띄워지는 것이다. 여기서 초기지연 문제가 발생한다.
사실상 빈 HTML 파일만을 받고, 이를 내가 직접 조립해야하기 때문에 조립되는 과정에서 불가피한 지연이 발생하게 된다. 이는 사용자 경험 측면에서 굉장히 악영향을 끼치기 때문에 해결해야 하는 문제로 남아있었다. 특히나 DB와 통신하는 부분이 굉장히 느린데, 이를 자바스크립트를 받고 난 시점에서 통신을 시도하기 때문에 더욱 더 좋지 않았다.
이를 해결하고자 한 게 바로 서버사이드!
누군가는 얘기할 것이다. (내가 그랬다)
아니 그럼 그렇다 치고 API로만 통신하는 자바스크립트를 서버에서 어떻게 돌릴건데
맞다. 물론 이건 스프링 입장에서...
스프링 프레임워크에서는 자바스크립트 코드를 서버에서 미리 돌리기에는 한계가 존재한다. 물론 가능은 하다만 조금 난이도가 있다. 그래서 스프링 프레임워크를 공부하는 사람들은 서버사이드 렌더링으로 JSP 같이 MVC 패턴 구조만 알고 있는 것이다...
그러나 NodeJS는 다르다. 애초에 여기는 자바스크립트를 사용한다.
💡 그럼 어떻게 동작하냐
대충 요약하자면 다음과 같다.
- NodeJS는 클라이언트의 요청이 들어오면 미리 DB에서 먼저 데이터를 불러온다.
- 그리고 프론트엔드 프레임워크 (React나 Vue)를 사용하여 HTML을 미리 만들어 둔다.
- 생성된 완성 HTML 페이지를 클라이언트에게 응답한다.
- 클라이언트는 이 HTML을 바로 렌더링하여 사용자에게 보여준다. 동시에 자바스크립트가 비동기로 로드되어 나머지 기능들도 수행할 수 있게 한다.
이게 가능한 이유는 Node.js는 브라우저 외부에서도 자바스크립트 코드를 실행할 수 있는 런타임이기 때문.
여기서 추가 확장하자면 요즘 그렇게 유행하는 NextJS는 리액트에서 이러한 SSR을 지원해주는 프레임워크인 것이다.
당연히 프론트엔드 입장에서는 성능상 우위를 가져갈 수 있는 프레임워크를 사용하는 것이 마땅함으로 유행중인 것이고..
✅ 결론
솔직히 너무 스프링 의존적으로 공부했다는 교훈을 얻었다.
자바스크립트 진영에서는 이런 식으로 점점 발전하고 있을 뿐더러 점점 안정화 되어가고 있는데, 나는 이미 안정화되어 있는 스프링만을 고집하고 있었던 것이다.
다음에는 NodeJS를 공부하고 싶다는 생각이 들었다..
물론 스프링으로 취업 좀 하고
