From 0f42b1604e001c09778535fc77e06349206b922a Mon Sep 17 00:00:00 2001 From: Joep Meindertsma Date: Wed, 8 Dec 2021 15:53:07 +0100 Subject: [PATCH] Improve documentation server side rendering Hi there, I just started using Stitches in a [new NextJS project](https://github.com/ontola/home), and I love it! Really nice stuff. The docs were clean and concise, the API is a blast to use and I really like that it supports SSR. However, when I tried to render my stuff on the server, I saw this annoying flash, presumably because the styles were only being created when the JS was parsed. I read the docs again, but didn't notice my issue. I used `dangerouslySetInnerHTML={{ __html: getCssText() }}`, but no luck. When I read the output of `getCssText()`, I saw only my theme variables - not my components. I knew I was close to a solution. Finally, I tried changing my `import from '@stitches/react'` to `import from '../stitches.config'`, and everything was fine. I felt stupid as I noticed that the docs do indeed mention that I should import this. However, I think this message can be conveyed more clearly. The first problem is [here](https://stitches.dev/docs/installation#use-it), in the very first 'use it' block. It shows importing `styled` from `@stitches` instead of `stitches.config`. I suggest changing the order, and never importing from `stitches`. The second problem, perhaps more importantly, is that the [Server side rendering docs](https://stitches.dev/docs/server-side-rendering) don't mention this important thing. --- data/docs/server-side-rendering.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/data/docs/server-side-rendering.mdx b/data/docs/server-side-rendering.mdx index 39aead3..ea50cff 100644 --- a/data/docs/server-side-rendering.mdx +++ b/data/docs/server-side-rendering.mdx @@ -5,6 +5,8 @@ description: How to configure server-side rendering. You can get access to the CSS string by using the `getCssText` function. This function is made available by the `createStitches` function. +_IMPORTANT: When making components, make sure to import `styled` and other functions from `../stitches.config` instead of from `@stitches/react` inside your components. `getCssText` will only output CSS that has been created in this manner._ + ```jsx import { createStitches } from '@stitches/react';