<div id="readability-page-1" class="page"><div id="root"><div><ul>
<li>작년 React에 머지된 패치 중 Suspense가 여러 개의 Suspending component를 가지고 있을 때 순차적으로 suspend를 하도록 기존(React 18)의 동작을 변경하는 패치가 있었다. (<a href="https://github.com/facebook/react/pull/26380">#26380</a>)</li>
<li>사실 이 PR의 존재를 알고 있었던 사람들은 이게 나중에 문제가 되지 않으려나? 라고 생각은 하고 있었지만 딱히 큰 이슈레이징을 하고 있지는 않은 상태로 묻혀져 있었다. (개인적으로는 이 부분이 좀 문제가 있다고 생각)</li>
<li>페이스북에서는 잘 알려져 있듯 Relay라는 GraphQL 기반 데이터 페칭 라이브러리를 사용한다. 이 라이브러리에 대해서는 이미 글도 몇 번 썼고, 인터넷에도 잘 알려져 있으므로 자세히 설명할 필요는 없겠다고 보지만 잘 모르는 사람들을 위해 설명하면 컴포넌트들이 가지고 있는 원격 의존 데이터(fragment)들을 하나로 모아서(query) 요청하도록 해 주는 기술이다.</li>
<li>하지만 일반적으로 Relay를 사용하지 않는 메타 외부의 앱들은 Tanstack Query나 swr 같은 colocation 형태의 요청 관리 라이브러리들을 많이 사용한다. 이런 라이브러리들은 prefetch를 유저가 매우 공격적으로 하지 않을 경우 워터폴을 경험할 가능성이 크기 때문에 안티패턴처럼 취급되어 왔으나, 개발의 편의성 (요청을 앱 전체 구조를 신경쓰지 않고 컴포넌트 단위로 선언해주면 된다는 점) 때문에 많이 사용되어 왔다. 대부분 depth는 깊지 않고 sibling이 많은 형태의 데이터의 그래프를 가지게 되는데, suspense를 활용할 경우 워터폴의 정도가 매우 심각해졌기 때문에 이런 사용 방식에 일종의 제동이 걸린 것이다.</li>
<li>가령 예를 들어 <code>&lt;Post&gt;&lt;Suspnese&gt;{comments.map(c =&gt; &lt;Comment id={c.id} /&gt;)}&lt;/Suspense&gt;&lt;/Post&gt;</code> 와 같이 여러 댓글들을 컴포넌트에서 id만 받아 따로따로 요청하고 있다고 해 보자. (일반적으로는 <code>post.comments</code> 같은 오브젝트가 있어 그것을 이용해 요청을 하겠지만, 모두가 sane한 디자인을 하는 것이 아니기도 하며 API에 대한 통제권이 없는 경우도 존재한다고 생각하면 말이 안 되는 것은 아니다) 현재 작동 방식에 따르면, 이 comments가 순차적으로 모두 로딩될 때까지 유저는 Suspense의 fallback을 봐야 하는 문제가 발생한다.</li>
<li>React 팀에서 권장하는 방식은 loader를 통해 route 단위로 데이터 의존성을 fetch (또는 prefetch)하는 것이며, tanstack 또는 remix(react-router) 등을 통해 이 loader 패턴이 많이 전파되어 왔으므로 아마 괜찮다고 생각했던 것이 아닌가 싶다. 하지만 나도 지금까지 수많은 in-the-wild 앱들을 봐 왔는데, 상술한 안티패턴의 형태로 작성된 앱들이 더 많았다. 슬픈 일이지만 그렇다.</li>
<li>또한 위에서 상술한 문제는 SPA 클라이언트에서만 발생하며, RSC에서는 병렬 렌더링의 형태로 작동한다는 점 때문에 Vercel을 사용하게 하려는 음모가 아니냐며 언제나 그렇듯 음모론과 비아냥을 퍼뜨리는 사람들도 등장하게 되었다.</li>
<li>해당 이슈는 Tanstack Query의 메인테이너들이 활발하게 문제를 제기하면서 현재 React 팀은 해당 패치의 영향을 과소평가했다고 인정하고 해당 문제에 대한 확실한 해결책이 나올 때까지 React 19 릴리즈를 하지 않겠다고 한 상태다. (React 19 RC를 발표했을 떄 '사실상 최종판' 이라고 했으므로, 상당히 전향적인 조치라고 볼 수 있다)</li>
</ul>
<p>TODO: 링크들 달기<br>
TODO: 조금 더 이슈에 대해 상술<br>
TODO: 트윗 상의 흥미로운 논의점들 추가<br>
TODO: PR에 대해 좀 더 상술 (특히 제시했던 솔루션들에 대해서)</p></div><div><p><a href="https://velog.io/@jaeholee/posts"><img src="https://velog.velcdn.com/profiles/jaeholee/thumbnails/1574752979.621.jpeg" alt="profile"></a></p></div><div><h4>0개의 댓글</h4></div></div></div>

작년 React에 머지된 패치 중 Suspense가 여러 개의 Suspending component를 가지고 있을 때 순차적으로 suspend를 하도록 기존(React 18)의 동작을 변경하는 패치가 있었다. (#26380)
사실 이 PR의 존재를 알고 있었던 사람들은 이게 나중에 문제가 되지 않으려나? 라고 생각은 하고 있었지만 딱히 큰 이슈레이징을 하고 있지는 않은 상태로 묻혀져 있었다. (개인적으로는 이 부분이 좀 문제가 있다고 생각)
페이스북에서는 잘 알려져 있듯 Relay라는 GraphQL 기반 데이터 페칭 라이브러리를 사용한다. 이 라이브러리에 대해서는 이미 글도 몇 번 썼고, 인터넷에도 잘 알려져 있으므로 자세히 설명할 필요는 없겠다고 보지만 잘 모르는 사람들을 위해 설명하면 컴포넌트들이 가지고 있는 원격 의존 데이터(fragment)들을 하나로 모아서(query) 요청하도록 해 주는 기술이다.
하지만 일반적으로 Relay를 사용하지 않는 메타 외부의 앱들은 Tanstack Query나 swr 같은 colocation 형태의 요청 관리 라이브러리들을 많이 사용한다. 이런 라이브러리들은 prefetch를 유저가 매우 공격적으로 하지 않을 경우 워터폴을 경험할 가능성이 크기 때문에 안티패턴처럼 취급되어 왔으나, 개발의 편의성 (요청을 앱 전체 구조를 신경쓰지 않고 컴포넌트 단위로 선언해주면 된다는 점) 때문에 많이 사용되어 왔다. 대부분 depth는 깊지 않고 sibling이 많은 형태의 데이터의 그래프를 가지게 되는데, suspense를 활용할 경우 워터폴의 정도가 매우 심각해졌기 때문에 이런 사용 방식에 일종의 제동이 걸린 것이다.
가령 예를 들어 <Post><Suspnese>{comments.map(c => <Comment id={c.id} />)}</Suspense></Post> 와 같이 여러 댓글들을 컴포넌트에서 id만 받아 따로따로 요청하고 있다고 해 보자. (일반적으로는 post.comments 같은 오브젝트가 있어 그것을 이용해 요청을 하겠지만, 모두가 sane한 디자인을 하는 것이 아니기도 하며 API에 대한 통제권이 없는 경우도 존재한다고 생각하면 말이 안 되는 것은 아니다) 현재 작동 방식에 따르면, 이 comments가 순차적으로 모두 로딩될 때까지 유저는 Suspense의 fallback을 봐야 하는 문제가 발생한다.
React 팀에서 권장하는 방식은 loader를 통해 route 단위로 데이터 의존성을 fetch (또는 prefetch)하는 것이며, tanstack 또는 remix(react-router) 등을 통해 이 loader 패턴이 많이 전파되어 왔으므로 아마 괜찮다고 생각했던 것이 아닌가 싶다. 하지만 나도 지금까지 수많은 in-the-wild 앱들을 봐 왔는데, 상술한 안티패턴의 형태로 작성된 앱들이 더 많았다. 슬픈 일이지만 그렇다.
또한 위에서 상술한 문제는 SPA 클라이언트에서만 발생하며, RSC에서는 병렬 렌더링의 형태로 작동한다는 점 때문에 Vercel을 사용하게 하려는 음모가 아니냐며 언제나 그렇듯 음모론과 비아냥을 퍼뜨리는 사람들도 등장하게 되었다.
해당 이슈는 Tanstack Query의 메인테이너들이 활발하게 문제를 제기하면서 현재 React 팀은 해당 패치의 영향을 과소평가했다고 인정하고 해당 문제에 대한 확실한 해결책이 나올 때까지 React 19 릴리즈를 하지 않겠다고 한 상태다. (React 19 RC를 발표했을 떄 '사실상 최종판' 이라고 했으므로, 상당히 전향적인 조치라고 볼 수 있다)
TODO: 링크들 달기 
TODO: 조금 더 이슈에 대해 상술
TODO: 트윗 상의 흥미로운 논의점들 추가 
TODO: PR에 대해 좀 더 상술 (특히 제시했던 솔루션들에 대해서)

React 19의 Suspense 동작 변화에 관하여 (WIP)

댓글