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

Proper CSS for client-only code in SSR mode? #3181

Open
mkilpatrick opened this issue Apr 26, 2024 · 0 comments
Open

Proper CSS for client-only code in SSR mode? #3181

mkilpatrick opened this issue Apr 26, 2024 · 0 comments
Labels
bug needs triage

Comments

@mkilpatrick
Copy link

This is more of a question than a bug. My current setup is that I'm using Vite in SSR mode. I have a custom client and custom server that render an App component. I've followed the Emotion SSR docs to add a custom cache that works great. My issue though is that if there is a component (Chakra in this case) that is ONLY rendered client side, the CSS for it does not get added to the cache. Here is some pseudocode of my setup:

// server.tsx

const key = "foo";
export const cache = createCache({ key });
const { extractCriticalToChunks, constructStyleTagsFromChunks } =  createEmotionServer(cache);

const html = ReactDOMServer.renderToString(
    <CacheProvider value={cache}>
      <App  />
    </CacheProvider>);

const chunks = extractCriticalToChunks(html);
const styles = constructStyleTagsFromChunks(chunks);

return `<!DOCTYPE html>
      <html>
          <head>${styles}</head>
          <body>
              <div id="reactele">${html}</div>
          </body>
      </html>
      `;

// client.tsx

return ReactDOM.hydrateRoot(
    document.getElementById("reactele")!,
    <CacheProvider value={cache}>
      <App />
    </CacheProvider>
  );

// app.tsx

export const App = () => {
return (
      <ChakraProvider>
          // This only renders client side and is the issue. If I remove this conditional to make the Menu render server side too then all is well
          {!getRuntime().isServerSide && (
            <Menu>
              <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
                Actions
              </MenuButton>
              <MenuList>
                <MenuItem>1</MenuItem>
                <MenuItem>2</MenuItem>
              </MenuList>
            </Menu>
          )}
      </ChakraProvider>
    </>
  );
}

Is there a way for the styles to work properly in this SSR but client side-only context?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@mkilpatrick