10 Tips For Building SSR/HDA applications

전통적인 서버사이드 렌더링(SSR) 방식으로 웹 애플리케이션을 구축하거나, 다른 말로 하이퍼미디어 기반 애플리케이션(HDA)을 구축하는 것은 React와 같은 싱글 페이지 애플리케이션(SPA) 프레임워크를 사용하여 웹 애플리케이션을 개발하는 것과 비교했을 때 사고방식의 전환이 필요합니다.

SPA 개발 방식에 익숙한 상태로 이 개발 스타일에 접근하면, 이 특정 아키텍처 선택의 많은 장점을 놓치고 좌절하게 될 가능성이 큽니다.

이러한 접근 방식의 강점을 최대한 활용하고 약점을 최소화할 수 있도록 사고방식을 원활하게 전환하는 데 도움이 되는 10가지 팁을 소개합니다:

#팁 1: 서버사이드의 강점을 최대한 활용하라

하이퍼미디어 기반 접근 방식의 큰 장점은 웹 애플리케이션을 구축할 때 서버사이드 환경이 훨씬 더 중요해진다는 것입니다. JSON만 생성하는 것이 아니라, 백엔드는 웹 애플리케이션의 사용자 경험에서 중요한 구성 요소가 됩니다.

이 때문에 서버사이드에서 제공하는 기능을 깊이 탐구하는 것이 중요합니다. 많은 오래된 웹 프레임워크는 HTML을 생성하는 데 있어 매우 깊은 기능을 제공합니다. 예를 들어, 서버사이드 캐싱과 같은 기능은 빠르고 반응이 좋은 웹 애플리케이션과 느린 사용자 경험의 차이를 만들 수 있습니다.

사용 가능한 모든 도구를 배우는 데 시간을 투자하십시오.

일반적인 규칙은 애플리케이션의 응답 시간이 100ms 이하가 되도록 하는 것이며, 성숙한 서버사이드 프레임워크는 이를 달성하는 데 도움이 되는 도구를 제공합니다.

#팁 2: 서버에서 애플리케이션을 구성하라

서버사이드 환경은 코드를 적절히 구성하는 매우 성숙한 메커니즘을 제공합니다. 대부분의 환경에서는 모델/뷰/컨트롤러(MVC) 패턴이 잘 개발되어 있으며, 모듈, 패키지 등의 도구는 코드를 조직화하는 데 탁월한 방법을 제공합니다.

SPA의 사용자 인터페이스가 일반적으로 컴포넌트 를 통해 구성되는 반면, 하이퍼미디어 기반 애플리케이션은 일반적으로 템플릿 포함 을 통해 구성됩니다. 서버사이드 템플릿은 애플리케이션의 HTML 렌더링 요구에 따라 분리되어 필요에 따라 서로 포함됩니다. 이는 컴포넌트 기반 애플리케이션에서 찾을 수 있는 것보다 더 적고 더 덩어리진 파일로 이어지는 경향이 있습니다.

또 다른 유용한 기술로는 템플릿 프래그먼트를 들 수 있습니다. 이를 통해 템플릿 파일의 일부만 렌더링할 수 있으며, 이는 서버사이드 애플리케이션에 필요한 템플릿 파일의 수를 더욱 줄여줍니다.

#팁 3: API 엔드포인트를 특화하라

JSON API와 달리, 하이퍼미디어 기반 애플리케이션을 위해 생성한 하이퍼미디어 API는 애플리케이션의 UI 요구 사항에 특화된 엔드포인트를 포함해야 합니다.

하이퍼미디어 API는 일반 목적의 클라이언트가 소비하도록 설계되지 않았기 때문에, 이를 일반화하려는 압박을 내려놓고 애플리케이션에 필요한 콘텐츠를 구체적으로 생성할 수 있습니다. 엔드포인트는 도메인 모델에 대한 일반적인 데이터 접근 모델을 위한 것이 아니라, 애플리케이션의 UI/UX 요구 사항을 지원하도록 최적화되어야 합니다.

#팁 4: API 엔드포인트를 적극적으로 리팩토링하라

관련된 팁으로, 하이퍼미디어 기반 API를 사용하는 경우, JSON API 기반 SPA를 작성할 때 강력히 권장되지 않는 방식으로 API를 적극적으로 리팩토링할 수 있습니다. 하이퍼미디어 기반 애플리케이션은 애플리케이션 상태의 엔진으로서의 하이퍼미디어(HATEOAS)를 사용하기 때문에, 애플리케이션이 개발되고 사용 사례가 변경됨에 따라 API의 모양을 변경하는 것이 가능하며, 실제로 권장됩니다.

하이퍼미디어 접근 방식의 큰 장점은 API를 버전 관리하거나 문서화할 필요 없이 시간이 지남에 따라 새로운 요구 사항에 맞게 완전히 재구성할 수 있다는 것입니다.

#팁 5: 데이터 스토어에 대한 직접 접근을 활용하라

SPA 접근 방식을 사용하여 애플리케이션을 구축할 때, 데이터 스토어는 일반적으로 JSON API 뒤에 위치합니다. 이러한 간접적인 접근 방식은 프론트엔드 개발자가 데이터 스토어에서 사용할 수 있는 도구를 최대한 활용하는 것을 방해하는 경우가 많습니다. GraphQL은 이 문제를 해결하는 데 도움이 될 수 있지만, 많은 개발자가 잘 이해하지 못하는 보안 관련 문제가 발생할 수 있습니다.

반면, 서버사이드에서 HTML을 생성할 때, 그 HTML을 생성하는 개발자는 데이터 스토어에 대한 완전한 접근 권한을 가지며, 예를 들어 SQL 스토어에서 조인 및 집계 함수와 같은 기능을 활용할 수 있습니다.

이는 HTML을 생성하는 개발자에게 훨씬 더 많은 표현력을 제공합니다. 하이퍼미디어 API를 UI 요구 사항에 맞게 구조화할 수 있기 때문에 각 엔드포인트를 조정하여 데이터 스토어 요청을 가능한 한 적게 할 수 있습니다.

일반적인 규칙으로는 모든 요청이 세 번 이하의 데이터 스토어 접근을 목표로 해야 한다는 것입니다.

#팁 6: 모달을 피하라

모달 창은 오늘날 많은 웹 애플리케이션에서 거의 표준처럼 인기를 끌고 있습니다.

불행히도, 모달 창은 웹의 많은 인프라와 잘 어울리지 않으며, 클라이언트 측 상태를 도입하여 하이퍼미디어 기반 접근 방식과 깨끗하게 통합하기 어려울 수 있습니다(불가능하지는 않지만).

모달 대신 인라인 편집과 같은 대안을 고려해보세요.

#팁 7: “충분히 좋은” UX를 받아들여라

HDA 접근 방식을 처음 접하는 많은 SPA 개발자들이 현재의 SPA 애플리케이션을 정확하게 하이퍼미디어를 사용하여 구현하는 것을 상상합니다. htmx 및 기타 하이퍼미디어 지향 라이브러리는 하이퍼미디어 기반 애플리케이션과 SPA 간의 상호작용 격차를 상당히 줄이지만, 그 격차는 여전히 존재합니다.

웹의 REST-ful 네트워크 아키텍처와 관련하여 Roy Fielding이 말했듯이,

그러나 균일한 인터페이스는 정보를 애플리케이션의 필요에 맞게 구체화된 형태가 아닌 표준화된 형태로 전송하기 때문에 효율성이 저하된다.

특정 UX에 대해 약간 덜 효율적이고 덜 상호작용적인 솔루션을 받아들이는 것은 웹 애플리케이션을 구축할 때 복잡성을 크게 줄일 수 있습니다.

완벽이 선의 적이 되지 않도록 하세요.

#팁 8: 필요할 때 “상호작용 섬“을 만드세요

웹 애플리케이션을 개발하다 보면 하이퍼미디어 접근 방식만으로는 부족한 상황이 발생할 수 있습니다.

그러한 상황의 좋은 예로, 항목의 목록을 재정렬하는 기능을 들 수 있습니다. 이를 “순수” 하이퍼미디어 방식으로 구현하려면 위아래 화살표를 클릭하거나 항목 옆에 순서 번호 드롭다운을 배치할 수 있습니다. (부끄럽게도 저도 이 두 가지를 다 만들어 본 적이 있습니다!)

하지만 이러한 경험은 사람들이 기대하는 것에 비해 매우 불편합니다. 사람들이 기대하는 것은 드래그 앤 드롭입니다.

이러한 경우, “상호작용 섬(Island of Interactivity)“으로 프런트엔드 중심의 접근 방식을 사용하는 것은 전혀 문제되지 않습니다.

SortableJS 예제을 고려해보세요. 여기에서는 드래그 앤 드롭을 허용하는 복잡한 상호작용 영역이 있으며, 이는 이벤트를 통해 htmx 및 더 넓은 하이퍼미디어 기반 애플리케이션과 통합됩니다.

이것은 HDA 내에서 더 풍부한 UX를 캡슐화하는 훌륭한 방법입니다.

#팁 9: 스크립팅을 두려워하지 마세요!

스크립팅은 웹 아키텍처의 명시적인 일부이며, 하이퍼미디어 접근 방식을 채택한 개발자들은 이를 사용하는 것을 두려워해서는 안 됩니다. 물론 스크립팅에도 여러 가지 방식이 있습니다.

가능한 한, 하이퍼미디어 친화적인 스크립팅 방식을 사용하여 하이퍼미디어 교환을 서버와 시스템 상태 변경을 위한 주요 통신 메커니즘으로 유지해야 합니다.

alpine.js와 hyperscript와 같은 도구를 사용하여 인라인 스타일 스크립팅을 탐색해보는 것도 좋습니다. 이러한 접근 방식은 스크립팅을 하이퍼미디어(HTML) 자체에 집중시키며, 작성할 수 있는 코드의 양에 미학적인 제한을 부과합니다.

#팁 10: 실용적이 되세요

마지막으로, 하이퍼미디어 사용에 대해 교조적이지 않도록 하세요. 결국, 하이퍼미디어는 고유한 강점과 약점을 가진 또 다른 기술일 뿐입니다. 특정 앱의 일부나 전체 앱이 하이퍼미디어가 제공할 수 있는 것보다 더 상호작용적인 기능을 요구한다면, 그에 적합한 기술을 선택하세요.

단, 하이퍼미디어가 할 수 있는 것을 잘 이해하고 있어야, informed developer로서 그 결정을 내릴 수 있습니다.

#결론

이 팁들이 하이퍼미디어와 서버사이드 렌더링을 보다 효과적이고 원활하게 도구로 활용하는 데 도움이 되기를 바랍니다. 하이퍼미디어는 완벽한 클라이언트-서버 아키텍처는 아니며, 명확한 트레이드오프가 존재하지만, 많은 웹 애플리케이션(오늘날 대부분의 웹 개발자들이 예상하는 것보다 훨씬 더 많은 경우)에 매우 효과적일 수 있으며, 그 경우 훨씬 간단한 전체 개발 경험을 제공합니다.