NextJS 13 and React Server Components Support

[luqven]

What's changing

To better support NextJS 13 and React Server Components, this library will include the 'use client' directive on the component exports.

Why these changes are needed

In the short term, this allows us to avoid throwing errors in NextJS builds for folks unaware of the library's internals that require the usage of React hooks and refs.

We based this decision on careful consideration of how the NextJS community is handling transitioning to RSC. A number of maintainers have taken a similar approach in the short term, including NextJS's own <Image> component. You can read more about this in this Vercel discussion and MUI issue.

Looking ahead

We plan on tackling server-only, as opposed to SSRd Client Components, components in the future. However, a lot of discussion and exploration needs to happen first. The main reason is that doing so would limit the feature set we can offer with this library. For example, A server-only component would not support the usage of React hooks or refs, which would impede our ability to allow consumers to use onLoad events via the ref prop. There are many breaking changes like this we'd need to address before we can move to server-only components.

If you'd like to see server-only components exported by this library, we'd love to hear from you; please comment or react to this issue. This helps us prioritize the work in the future.

More info

• related issues: [feat]: work outside of 'use client' directive #909
• "use client" RC PR: feat: add use client directive to index #912

[luqven]

v9.8.0-rc.1 release is available on:

• npm package (@next dist-tag)
• GitHub release

Example Usage:

• CodeSandbox

[luqven]

Released - v9.8.0
9.8.0 (2023-08-04)
Features
• add use client directive to index (daa840f)