Vue3 Suspense 를 사용하면서 발생한 문제(근본적인 해결은 못 함)

문제가 발생했다

개인 블로그를 Vue3 로 제작하던 중 <transition> 내부에서 <suspense> 를 사용하면서 에러와 마주하게 되었다.

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

insertBefore 를 실행하다가 발생한 에러 같다. 정확히는 insertBefore 의 첫 번째 파라미터로 들어가는 newNode 가 두 번째 파라미터로 들어가는 refNode 의 위치로 이동할 수 없다는 오류이다. 왜냐하면 refNode 가 target 엘리먼트의 자식 노드가 아니기 때문이다.

• target.insertBefore(a, b) 를 실행하는 경우, b 가 target 의 자식 노드가 아닌 경우

<div id="target">
 <div id="a"></div>
</div>
<div id="b"></div>

<script>
target.insertBefore(a, b)
</script>

a 는 b 앞으로 이동하고 싶어도 b 가 target 의 자식노드가 아니기 때문에 이동할 수 없어서 에러가 발생한다.

• target.insertBefore(a, b) 를 실행하는 경우, b 가 특정 Node 에 아예 속하지 않는 경우

<div id="target">
 <div id="a"></div>
</div>

<script>
const b = document.createElement('div') // createElement 로 생성만 되어있고 DOM 에는 속하지 않을 경우

target.insertBefore(a, b)
</script>

• b 가 아예 DOM 에 속하지 않을 경우에도 같은 문제가 발생한다

삽질을 좀 해볼까?

우선 어떤 에러인지는 파악이 되었고, 좀 더 다양한 에러 케이스를 파악해보기 위해 여러 삽질을 해보았다.

1. <transition> 에서 <suspense> 를 제거 했을 경우
2. <transition> 의 duration 을 0 으로 했을 경우
3. <suspense> 만 사용했을 경우

위 세 가지의 경우 모두 에러는 발생하지 않았다.

현상만 가지고 추측을 해봤는데…

<transition> 과 <suspense> 코드를 보지 않고 추측하기로는 <transition> 이 적용되는 duration 만큼의 시간이 지나기 전에 <suspense> 를 통한 컴포넌트 변경이 먼저 완료 됐을 때 발생하는 것으로 보였다.

<suspense> 의 default slot 으로 들어오는 컴포넌트의 비동기 동작이 끝이나야 default slot 컴포넌트의 내용을 보여주므로 <suspense> 의 fallback slot 을 이용에 그 공백을 매꿔주면 어떨까 싶었지만, 이 방법 역시 실패했다.

사실 이전에도 <suspense> 를 사용하면서, fallback slot 에서 default slot 으로 바뀌는 시간이 즉시 이뤄지는 것이 아닌 약간의 지연시간이 있다는 것을 발견 했었는데, 아무래도 그 부분에서 오는 문제인 것으로 보인다.

동병상련(同病相憐)

아직 실험단계인 <suspense>

<suspense> 가 아직 실험단계라서 문제점들이 있는 것 같다. 그래서 혹시 github issue 에 나와 비슷한 사례가 있는지를 찾아 보았다.

• https://github.com/vuejs/core/issues/8105

역시 나와 동일한 이슈가 발생 했고 아직 고쳐지지는 않은 상태다.

일단 빼자

일단 나는 <suspense> 를 사용하지 않기로 했다. Top level await 를 사용해보고 싶었는데, 아직은 시기 상조인 것 같아 Top level await 를 전부 빼버리기로 했다. Top level await 를 뺐으니 <suspense> 를 사용할 이유도 없어서 <suspense> 도 같이 제거를 하였다.

결론,

• 아직은 Vue3 <suspense> 는 안정적이지 못하다
• Top level await 편했는데 아쉽다
• 개인 블로그 개발이 완료 될 때 까지 이 문제가 해결되지 않았다면 <suspense> 코드를 살펴봐야겠다