Menu
I'm using nextjs for SSR. I'm using this technique to render styles on server side. So when DOM is downloaded it not just gets HTML but also all the CSS it needs to paint in a style tag.
Once the HTML is parsed it starts painting - good so far, the problem starts once JS is downloaded and parsed. Especially _app.js, styled-components deletes existing styles, reference.
How does this affect performance?
My consensus:
Does the same thing happen when route changes because it'll pull new JS files and compile and set styles. Is this the cost we have for styled-components?
769
Styling any componentThe styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element. If you are using react-native keep in mind to use style instead of className.
One way to dynamically change css properties with styled components is to insert a custom prop into your React component and access said property using the dollar sign and curly braces commonly used for template literals. Our current example is testing to see if our use pointer prop is true.
To pass props to React components created with styled-components, we can interpolate functions into the string that creates the component. We create the ArrowStyled component with the styled. div tag. Then string that we pass into the tag has the rotate value set from a prop.
Usage. Import createTheming from the library to create a theming object. import { createTheming } from '@callstack/react-theme-provider'; const { ThemeProvider, withTheme, useTheme } = createTheming(defaultTheme); Then wrap your code in ThemeProvider component to make it available to all components.
Using Styled Components comes with its costs, its great for statically generated websites/applications but server side rendering is definitely not its forte. every update they try to enhance their performance in SSR by a few percents. This is definitely a known issue and the Companies like Atlassian are working to get over this bottleneck. Its the sole reason they are working on Compiled a CSS-in-JS that is focused on removing this issue by smartly accessing your code on compile time. Check out the official Documentation
and also checkout this wonderful article by Nathan on LogRocket dev about compiled and its origin
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
