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.

Sign up for GitHub

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

Jump to bottom

docs: update styling support for streaming #35375

Merged
merged 4 commits into from Mar 26, 2022
Merged

docs: update styling support for streaming #35375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1017873
docs: update styling support for streaming
huozhi Mar 16, 2022
5dc2a1b
update
huozhi Mar 23, 2022
a86db02
Update docs/advanced-features/react-18/streaming.md
huozhi Mar 26, 2022
0c883fe
Merge branch 'canary' into docs/react-18
kodiakhq[bot] Mar 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/advanced-features/react-18/streaming.md
View file
Open in desktop
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.
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
8 changes: 4 additions & 4 deletions errors/client-flush-effects.md
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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.