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.
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?
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).
window.__NEXT_DATA__.ids
is the list of classNames that were already rendered on the server.Any idea what's going on here?