[Korean FE Article] 극한의 서버 사이드 렌더링
소개
브라우저에서 자바스크립트를 실행하지 않고도 클릭에 반응하는 게임을 만들 수 있을까요? 이 글에서는 HTTP 연결을 열어 둔 채 HTML과 CSS를 계속 보내 화면을 바꾸고, 폼과 숨겨진 iframe으로 사용자 입력을 받는 방법을 소개합니다.
처음에는 어떻게 가능한 건지 궁금해서 읽기 시작했는데, 게임을 만드는 과정을 따라가다 보니 “이걸 이렇게 쓰네?” 싶은 부분이 많았습니다. 평소 쓰던 기술인데도 이런 식으로 조합할 생각은 못 해봐서 재미있었고, 함께 읽어보면 좋겠다는 생각에 번역하게 됐습니다.
실제로 어디까지 동작하는지, 어떤 문제가 생기는지도 직접 실험하며 짚어주는 글이라 가볍게 읽기 좋습니다. 웹 기술로 이것저것 만들어보는 걸 좋아하시거나, 조금 엉뚱해도 일단 해보는 개발 이야기를 좋아하신다면 추천드립니다!
팀원들의 의견
글에서는 자바스크립트 없이 HTML과 CSS만으로 어디까지 구현할 수 있는지 보여줬는데요. 실무에서 자바스크립트로 구현했던 기능을 HTML이나 CSS 기능으로 바꿔본 경험이 있으신가요? 바꾸고 나서 코드가 단순해졌는지, 오히려 제약 때문에 불편했던 점은 없었는지 궁금합니다.
💬. 저는 바꿔본 경험은 사실상 없는 것 같은데요. 생각했던 것들은 details 태그를 사용해서 아코디언을 구현한다던지, dialog 태그를 사용해서 모달을 구현하는 것들에 대한 예시를 봤을 때 접근성 관련 동작들을 내장해서 제공해주다보니 편리하겠다는 생각이 드는 것과 동시에 이게 실제 제품에 필요한 UI와 부가적인 기능들을 만족하기 위해서 괜찮을까? 라는 생각이 들고 그래서 굳이 잘 쓰고 있던 컴포넌트의 구현을 바꿀 필요가 있을까? 하는 생각이 자연스럽게 들었던 것 같아요. 이런 이유로 기존에 제품을 잘 운영하고 있었다면 선뜻 변경하기는 어려울 것 같아요!
💬. 기존 질문에 있어서는 승완님이 말씀해 주신 것같은 대답을 할 수 있을것 같고, 질문을 글의 내용에 조금 더 가깝게 바꿔보면, 자바스크립트없이 HTML과 CSS만으로 동적인 UI를 구현하는 접근이 실무에서도 이점이 있을까? 정도로 생각해봤는데요.
이 관점에서는 스트리밍을 활용해 네트워크 의존성이나 입력 지연, 서버 부하 같은 비용을 감수하는 방식이 흥미롭긴 했지만 실용적인 이점은 크지 않아 보였습니다. 결국 이번 글은 새로운 구현 방식을 실무에 적용하기보다는, 웹 플랫폼의 동작 원리를 깊이 이해하고 이를 극단적으로 활용한 재미있는 실험이라는 생각이 들었습니다. 개인적으로는 이런 방식도 가능하다는 사실을 이해한 것만으로 충분히 의미 있었고, 굳이 실무에 적용할 방법까지 고민하지 않고 넘어가도 되지 않을까 싶었습니다 ㅋㅋ
목차
(일반적인) 서버 사이드 렌더링이란?
아주 느린 HTTP 서버
사용자 입력 받기
XSSR로 무언가 만들어 보기
생각만큼 나쁘지는 않습니다 — 성능, 대역폭, 지연 시간
Fedi를 다운시키다
앞으로 해볼 일
글이 마음에 드셨다면 ‘좋아요’를 눌러주세요! 팀원들에게 큰 힘이 됩니다. 👍
✔︎ Korean FE Article 팀이 궁금하다면?
✔︎ 활동 후원하기
신규 참여자 모집 (~26.11.30)
🎙️ 활동하면 좋은 점!
✔ 최신 FE 아티클을 접하고 주제에 대해 관심 있는 사람들과 함께 이야기할 수 있습니다.
✔ 주기적으로 진행하는 네트워킹을 통해 다양한 회사의 소식을 듣고 친목을 쌓을 수 있습니다.
✔ 메일링을 통해 자신의 회사 또는 커뮤니티의 블로그, 채용글을 홍보할 수 있습니다.
신청하러 가기 ➡️ https://forms.gle/N557wRjrbMpRNwZc6
후원자 명단 🫶
활동을 후원해 주시면 감사의 의미로 메일 하단, 저장소 하단에 프로필 링크(ex. github, x 등..)를 노출합니다. 후원 후 [email protected]로 연락 부탁드립니다.
© 2026 Korean FE article Team
-