Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update styling support for streaming #35375

Merged
merged 4 commits into from
Mar 26, 2022
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/advanced-features/react-18/streaming.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
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.
huozhi marked this conversation as resolved.
Show resolved Hide resolved

> Note: The styling code should be only placed in client components, not server components, when using React Server Components
8 changes: 4 additions & 4 deletions errors/client-flush-effects.md
Original file line number Diff line number Diff line change
@@ -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') {
Expand Down
6 changes: 3 additions & 3 deletions errors/multiple-flush-effects.md
Original file line number Diff line number Diff line change
@@ -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 `<Suspense>` 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 `<Suspense>` boundaries. Restructure your application to prevent extraneous calls.