#shared-worker

같은 서비스를 10개의 탭으로 열었을 때 서버에 소켓 연결도 10개가 생긴다면, 문제는 실시간 기능 자체가 아니라 브라우저 컨텍스트마다 연결을 새로 만드는 구조에 있을 수 있다. 채팅, 알림, 협업 상태처럼 페이지가 열려 있는 동안 유지되는 연결은 탭 수만큼 늘어날 때 서버와 클라이언트…

Worker를 만들 수 있다는 사실보다 더 중요한 것은, Next.js가 서버와 브라우저를 오가는 동안 그 Worker 생성 코드가 언제 평가되는지 통제하는 일이다. Dedicated Worker는 하나의 호출자와 연결되는 구조라서 이미지 처리나 대용량 데이터 변환처럼 특정 화면의 작업…

이미지 하나를 처리했을 뿐인데 버튼 hover가 끊기고 입력창이 늦게 반응한다면, 문제는 React 렌더링보다 자바스크립트가 어디에서 실행되고 있는지에 있을 수 있다. 브라우저 화면은 HTML과 CSS만으로 움직이는 것처럼 보이지만, 사용자의 입력을 받고 레이아웃을 계산하고 JavaSc…

브라우저에서 실행되는 JavaScript가 많아질수록 이상한 순간이 찾아온다. 비동기 처리를 했는데도 화면은 멈추고, 탭을 몇 개 열었을 뿐인데 서버에는 같은 소켓 연결이 여러 개 생기고, Next.js에서는 코드가 서버에서 평가될지 브라우저에서 평가될지 계속 의식해야 한다. Worke…