aphrodite icon indicating copy to clipboard operation
aphrodite copied to clipboard

Aphrodite Duplicating ClassName on SSR

Open lightninglu10 opened this issue 6 years ago • 1 comments

Hey guys, I'm using Next.js to server side render my app. I have some components that render solely on the client, and some that render on the server.

I tried utilizing Aphrodite's StyleSheet.rehydrate, but I don't see it working, and my styles from the server are clobbering my styles from the client (they become the same className, even though they're different styles).

if (typeof window !== 'undefined') {
  /* StyleSheet.rehydrate takes an array of rendered classnames,
  and ensures that the client side render doesn't generate
  duplicate style definitions in the <style data-aphrodite> tag */
  StyleSheet.rehydrate(window.__NEXT_DATA__.ids)
}

window.__NEXT_DATA__.ids is the list of classNames that were already rendered on the server.

Any idea what's going on here?

lightninglu10 avatar Mar 13 '18 20:03 lightninglu10

I think it might be hard to say without more context. e.g. what is executed before the rehydrate call? Can you put together a repo that reproduces the issue?

lencioni avatar Mar 15 '18 04:03 lencioni