From ae3ac5dcdde3428f9358a9410f748a2c0cd93f5c Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 16 Mar 2022 17:56:53 +0100 Subject: [PATCH] docs: update styling support for streaming --- docs/advanced-features/react-18/streaming.md | 4 +++- errors/client-flush-effects.md | 8 ++++---- errors/multiple-flush-effects.md | 6 +++--- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/advanced-features/react-18/streaming.md b/docs/advanced-features/react-18/streaming.md index 984264190dc5..c43c10d6e628 100644 --- a/docs/advanced-features/react-18/streaming.md +++ b/docs/advanced-features/react-18/streaming.md @@ -68,4 +68,6 @@ Currently, data fetching within `Suspense` boundaries on the server side is not #### Styling -The Next.js team is working on support for `styled-jsx` and CSS modules in streaming SSR. Stay tuned for updates. +So far only `styled-jsx` is supported with streaming. The Next.js team is working on support for CSS modules and other CSS solutions in streaming SSR. Stay tuned for updates. + +Notice that for React Server Components, `styled-jsx` should be only placed in client components. diff --git a/errors/client-flush-effects.md b/errors/client-flush-effects.md index 64f107b49990..18ca8dd126cc 100644 --- a/errors/client-flush-effects.md +++ b/errors/client-flush-effects.md @@ -1,16 +1,16 @@ -# `useFlushEffects` can not be called on the client +# `unstable_useFlushEffects` can not be called on the client #### Why This Error Occurred -The `useFlushEffects` hook was executed while rendering a component on the client, or in another unsupported environment. +The `unstable_useFlushEffects` hook was executed while rendering a component on the client, or in another unsupported environment. #### Possible Ways to Fix It -The `useFlushEffects` hook can only be called while _server rendering a client component_. As a best practice, we recommend creating a wrapper hook: +The `unstable_useFlushEffects` hook can only be called while _server rendering a client component_. As a best practice, we recommend creating a wrapper hook: ```jsx // lib/use-style-libraries.js -import { useFlushEffects } from 'next/streaming' +import { unstable_useFlushEffects as useFlushEffects } from 'next/streaming' export default function useStyleLibraries() { if (typeof window === 'undefined') { diff --git a/errors/multiple-flush-effects.md b/errors/multiple-flush-effects.md index 51a9d7a58a0d..b19e88edd04b 100644 --- a/errors/multiple-flush-effects.md +++ b/errors/multiple-flush-effects.md @@ -1,9 +1,9 @@ -# The `useFlushEffects` hook cannot be used more than once. +# The `unstable_useFlushEffects` hook cannot be used more than once. #### Why This Error Occurred -The `useFlushEffects` hook is being used more than once while a page is being rendered. +The `unstable_useFlushEffects` hook is being used more than once while a page is being rendered. #### Possible Ways to Fix It -The `useFlushEffects` hook should only be called inside the body of the `pages/_app` component, before returning any `` boundaries. Restructure your application to prevent extraneous calls. +The `unstable_useFlushEffects` hook should only be called inside the body of the `pages/_app` component, before returning any `` boundaries. Restructure your application to prevent extraneous calls.