From 1017873c957f9a47929beec8ae592d2f709d8fb5 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 16 Mar 2022 17:56:53 +0100 Subject: [PATCH 1/3] 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. From 5dc2a1bc5df902811d5ff1b6aac55de4529d2ef6 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 23 Mar 2022 11:36:26 +0100 Subject: [PATCH 2/3] update --- docs/advanced-features/react-18/streaming.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/advanced-features/react-18/streaming.md b/docs/advanced-features/react-18/streaming.md index c43c10d6e628..a3d81f41ef40 100644 --- a/docs/advanced-features/react-18/streaming.md +++ b/docs/advanced-features/react-18/streaming.md @@ -68,6 +68,6 @@ Currently, data fetching within `Suspense` boundaries on the server side is not #### Styling -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. +React inline styles, Global CSS, CSS modules and Next.js built-in `styled-jsx` are supported with streaming. The Next.js team is working on the guide of integrating other CSS-in-JS solutions in streaming SSR. Stay tuned for updates. -Notice that for React Server Components, `styled-jsx` should be only placed in client components. +> Note: The styling code should be only placed in client components, not server components, when using React Server Components From a86db02ad527d8bf06c88cd2f9947c27e3f232f2 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Sat, 26 Mar 2022 13:39:18 +0100 Subject: [PATCH 3/3] Update docs/advanced-features/react-18/streaming.md Co-authored-by: Shu Ding --- docs/advanced-features/react-18/streaming.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/react-18/streaming.md b/docs/advanced-features/react-18/streaming.md index a3d81f41ef40..0734d0983464 100644 --- a/docs/advanced-features/react-18/streaming.md +++ b/docs/advanced-features/react-18/streaming.md @@ -68,6 +68,6 @@ Currently, data fetching within `Suspense` boundaries on the server side is not #### Styling -React inline styles, Global CSS, CSS modules and Next.js built-in `styled-jsx` are supported with streaming. The Next.js team is working on the guide of integrating other CSS-in-JS solutions in streaming SSR. Stay tuned for updates. +Inline styles, Global CSS, CSS modules and Next.js built-in `styled-jsx` are supported with streaming. The Next.js team is working on the guide of integrating other CSS-in-JS solutions in streaming SSR. Stay tuned for updates. > Note: The styling code should be only placed in client components, not server components, when using React Server Components