From 104ab76c0dab544dfacf87d5d221e89f56ce6b28 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 14 Jan 2022 17:48:02 +0100 Subject: [PATCH] docs: update ssr and nextjs (#771) * doc: update ssr * Update readme.md Co-authored-by: Steven * Update readme.md Co-authored-by: Steven * nextjs auto-config Co-authored-by: JJ Kasper Co-authored-by: Steven Co-authored-by: JJ Kasper --- readme.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index e90ae796..af903208 100644 --- a/readme.md +++ b/readme.md @@ -120,6 +120,10 @@ Turn on/off automatic vendor prefixing (default: `true`) - Dynamic styles and themes support - CSS Preprocessing via Plugins +## Using in Next.js + +Next.js automatically configures `styled-jsx` with babel or swc, you don't have to configure it manually. + ## How It Works The example above transpiles to the following: @@ -334,6 +338,13 @@ Please keep in mind that constants defined outside of the component scope are tr ## Server-Side Rendering +`styled-jsx` v5 introduced `StyledRegistry` component and `useStyleRegistry` hook to let you scope styles rendering in each SSR render to keep concurrent-safe. + +- `registry.styles()` will return the array of react components for style tags. +- `registry.flush()` can clean the existing styles in the registry, it's optional for SSR when you have a standalone registry for each SSR render. + +> Next.js 12 integrates with `styled-jsx` v5 and manages the registry for you. + ```jsx import React from 'react' import ReactDOM from 'react-dom/server' @@ -343,7 +354,6 @@ import App from './app' function Styles() { const registry = useStyleRegistry() const styles = registry.styles() - registry.flush() return <>{styles} }