Suspense
@suspensive/react์ <Suspense/>
๋ React์ Suspense๊ฐ ๋ฉ๋๋ค.
props.fallback
fallback์ react์ Suspense์ fallback์ ๋์ผํ๊ฒ ๋์ํฉ๋๋ค.
import { Suspense } from '@suspensive/react'
const Example = () => (
<Suspense fallback={<Loading />}>
<Children />
</Suspense>
)
Default fallback
<Suspense/>
๋ <DefaultPropsProvider/>
์ ํจ๊ป ์ฌ์ฉํ ๋ ๋์ฑ ๊ฐ๋ ฅํด์ง๋๋ค. <DefaultPropsProvider/>
๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ๋ฌ <Suspense/>
์ default fallback๋ฅผ ์ ์ดํฉ๋๋ค. ์์ธํ ๋ด์ฉ์ <DefaultPropsProvider/>
ํ์ด์ง์ ์๊ฐ๋์ด ์์ต๋๋ค.
์๋ฒ์ฌ์ด๋ ๋ ๋๋ง์ ํผํ๊ธฐ (clientOnly)
clientOnly prop์ ์ฌ์ฉํ๋ฉด <Suspense/>
๋ ์๋ฒ์์๋ fallback์ ๋ฐํํฉ๋๋ค. mount ํ(ํด๋ผ์ด์ธํธ์์๋) children์ ๋ฐํํฉ๋๋ค. mount๋ ํด๋ผ์ด์ธํธ์์๋ง ์ผ์ด๋๊ธฐ ๋๋ฌธ์ ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง์ ํผํ ์ ์์ต๋๋ค.
import { Suspense } from '@suspensive/react'
const Example = () => (
<Suspense clientOnly fallback={<Loading />}>
<Children />
</Suspense>
)
clientOnly prop์ ์ฌ์ฉํ๋ฉด ๋ด๋ถ์ ์ผ๋ก useIsClientํ ์ ์ฌ์ฉํ๊ณ useIsClient๋ useSyncExternalStore์ getSnapshot์ getServerSnapshot์ ํ์ฉํด client์์ ๋ณด์ฅํ๊ณ ์์ต๋๋ค.
const useIsClient = () =>
useSyncExternalStore(emptySubscribe, getSnapshot, getServerSnapshot)
const emptySubscribe = () => noop
const getSnapshot = () => true
const getServerSnapshot = () => false
https://x.com/TkDodo/status/1741068994981826947?t=XmG17etMUL2m0JFim03vqw&s=19
SSR์ ์ง์ํ๋๋ก ์ ์ง์ ์ผ๋ก ๋ง์ด๊ทธ๋ ์ด์
ํ๊ธฐ (<Suspense clientOnly/>
-> <Suspense/>
)
React.Suspense๋ฅผ SSR๊ณผ CSR์์ ๋ชจ๋ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด <Suspense clientOnly/>
์์ <Suspense/>
๋ก ์ ์ง์ ์ผ๋ก ๋ง์ด๊ทธ๋ ์ด์
ํ๋ฉด ์ฝ๊ฒ ์ ์ฉํ ์ ์์ต๋๋ค.