React-spring: v9 <Transition> bug with NextJS

[aleclarson]

https://github.com/react-spring/react-spring/issues/325

@aleclarson
I try v9-beta with nextjs look like animation flashing again when I change route with animation.
It works fine on v8 and feels smoother.

v8 example
https://react-spring-325-aszmjdhnnv.now.sh

v9 example
https://react-spring-325-tkuptdounw.now.sh

codesandbox (code example but this behavior does not effect on codesandbox)
https://codesandbox.io/s/reactspring-325-vu8en

try to change route between about page and contacts page slowly, you will see flashing white background before they animate.

_Originally posted by @rainstormza in https://github.com/react-spring/react-spring/issues/642#issuecomment-497167320_

[aleclarson]

@rainstormza Can you reproduce without NextJS?

[rainstormza]

@aleclarson I think it works when used with create-react-app
I think the problem is server-side-rendering.

@drcmda Does v8 fix about SSR problem?

[tim-soft]

@aleclarson HMR is broken when editing anything in /pages other than _app.js

updated sandbox with 9.0.0-beta.24
https://codesandbox.io/s/react-spring-325-rk3mo

[aleclarson]

@tim-soft Using the reset prop seems to fix it.

[aleclarson]

Also, the OP's issue was fixed somewhere between beta.8 and beta.27 🎉

[rainstormza]

@aleclarson Animation still flash on v9 beta.31
but it works fine on v8

[aleclarson]

Whoops, I commented on the wrong issue. Sorry! This one will be fixed in the next canary too, though. 😅

[aleclarson]

Now available in v9.0.0-rc.2 #985

Demo here: https://codesandbox.io/s/react-spring-699-57yi5