thymeleaf 등과 같은 view와 프론트에서 그리는 화면의 관계

안녕하세요. 김민희님, 공식 서포터즈 y2gcoder입니다.

우선 서버사이드렌더링과 클라이언트사이드렌더링은 이름 그대로 페이지를 그려내는 주체가 클라이언트단인지 서버단인지의 차이로 나뉜다고 할 수 있습니다. 이 점을 전제로 하며 답변해보고자 합니다.

1) 동일한 화면에 대해 서버사이드와 클라이언트 사이드가 공존한다는 건가요? => 맞습니다. 예시를 들자면 초기 화면을 그릴 때는 서버사이드렌더링을 통해 그려낸 html 을 보여주고, 그 후에 사용자 인터렉션과 그에 대한 결과로 바뀌는 부분을 클라이언트사이드렌더링을 통해 그려낼 수 있습니다.

2) 실제 사용자가 보는 화면은 둘 중 어느 걸로 선택되나요? => 이 부분은 둘다 해당될 수 있다고 말씀드리고 싶습니다. React 등을 사용해 클라이언트 사이드 렌더링을 사용해서 웹 페이지 화면을 그려낸다면 사용자는 클라이언트 사이드 렌더링을 통해 그려낸 화면을 보게 되는 것이고 thymeleaf를 사용해 그려낸 화면이라면 사용자는 서버사이드 렌더링을 통해 그려낸 화면을 보게 되는 것입니다. 거기서 javascript 를 통해 동적으로 화면을 렌더링하는 요소가 있다면 그 부분은 클라이언트 사이드 렌더링을 통해 그려낸 화면이라 볼 수 있습니다.

3) 의외로 서버사이드렌더링이 필요할 때가 있습니다.

가장 먼저 생각나는 것은 빠른 첫 화면 로딩을 위해서입니다. 서버 사이드 렌더링은 서버에서 화면을 그려서 응답해주는 것이기 때문에 사용자 입장에서는 비교적 완성된 화면이 보입니다. 반면 클라이언트 사이드 렌더링은 기본적으로 javascript를 통해 화면을 그려내는 방식이기 때문에 초기 페이지를 들어갔을 때 흰 화면이 잠깐 보일 수 있습니다.

또한 위의 이유와 연계되어 SEO 최적화하는 부분에서도 서버사이드렌더링이 조금 더 이득을 볼 수 있습니다. 예를 들어 검색엔진 봇은 전통적으로 해당 사이트의 html 컨텐츠를 분석하여 인덱싱을 하게 됩니다. 그런데 봇이 들어갔을 때 기준으로 서버사이드 렌더링은 이미 완성된 html이 존재하기 때문에 컨텐츠를 분석하기 용이하지만, 클라이언트사이드 렌더링은 javascript를 이용해 화면을 그려내는 방식이라 초기 html 이 비어있습니다. 그래서 검색엔진 봇이 컨텐츠 데이터를 수집하기 어려웠습니다! (최근은 봇은 이러한 부분을 해결하고 있다고 합니다!)

그래서 서버사이드렌더링의 이점이 분명히 있기 때문에 프론트엔드에서도 SSR을 지원해주는 프레임워크의 인기가 많은 것으로 알고 있습니다. Next.js 나 Nuxt.js, SvelteKit 등의 SSR 프레임워크는 이러한 니즈 때문에 탄생한 프레임워크라 볼 수 있습니다.

더 궁금하시다면 CSR, SSR을 키워드로 하여 검색해보시는 것을 추천해드립니다!

감사합니다.