Themed component not updating with new values (Next.js SSR)

[leerob]

Environment

System:

• OS: macOS Mojave 10.14.6
• CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
• Memory: 906.16 MB / 16.00 GB
• Shell: 5.3 - /bin/zsh

Binaries:

• Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
• Yarn: 1.16.0 - /usr/local/bin/yarn
• npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm

npmPackages:

• babel-plugin-styled-components: 1.10.6 => 1.10.6
• styled-components: 5.0.0-rc.2 => 5.0.0-rc.2

Reproduction

leerob/leerob.io#130
https://leerob-git-use-dark-mode.leerob1.now.sh/

Steps to reproduce

1. Load the page.
2. Observe the styles being off on initial page load.

Expected Behavior

All of the styles should display correctly on page load.

Actual Behavior

Some work, but others do not.

Digging in deeper at a specific example, look at the TimelineStep.

It uses a value from the theme for the border color.

        border: 10px solid
            ${(props) => {
                console.log(props.theme.secondary);

                return props.theme.secondary;
            }};

If I put a console log inside of the component. I get two different values depending on whether I'm on the server or client. This makes sense.

In my terminal output, it's white. In my browser console, it's dark grey. This is because Next is serving up the initial styles through_document.js on page load and it's server-side rendered. The issue is that the styled-component is not updating.

If I log out the theme in the component, I can confirm it's getting the new dark theme. The only way I can get the component to recognize the changes is to force an arbitrary re-render like so:

const themeContext = useContext(ThemeContext);
console.log(themeContext);

const [test, setTest] = React.useState('test');

React.useEffect(() => {
    setTest('new');
}, []);


...
...


<StyledTimeline key={test}>

Another way to observe this behavior is to toggle the theme. This correctly updates the components.

[edenstrom]

Sadly, I have the same behaviour in a Gatsby project with styled-components. Tried SC 4.2 => 5.0.0-rc2.

Maybe #2629 is relevant?

As you found re-rendering everything makes it work, but makes for some ugly code.

[leerob]

Well, at least I'm not crazy. This one has been puzzling me.

[edenstrom]

Yes, I can't really see any logic behind it neither. Some components update with the correct theme, some doesn't.

I'm using styled-system if that changes anything.

I'll probably disable the dark theme until I can find a better solution.

EDIT: in the image below, light mode is server-rendered, dark mode is client-rendered.

[leerob]

Found a workaround here -> https://brianlovin.com/overthought/adding-dark-mode-with-next-js

// Providers.tsx
import { lightTheme, darkTheme } from '../Theme';

export default ({ children }) => {
  const { value } = useDarkMode(false, { storageKey: null, onChange: null })
  const theme = value ? darkTheme : lightTheme

  const [mounted, setMounted] = React.useState(false)

  React.useEffect(() => {
    setMounted(true)
  }, [])

  // prevents ssr flash for mismatched dark mode
  if (!mounted) return null

  return (
    <ThemeProvider theme={theme}>
      {children}
    </ThemeProvider>
  );
}

[brianlovin]

Unfortunately this solution breaks things like server-side generated meta tags, used for generating social media previews on links (and general SEO best practices).

If I remove the hack I found here: #2880 (comment) we have confirmed that styled-components breaks, but social media cards / SEO issues are resolved.

[quantizor]

I can't tell if this is still an issue

[leerob]

Unfortunately, yes it is still an issue.

On Sun, Dec 29, 2019 at 10:09 PM Evan Jacobs ***@***.***> wrote: I can't tell if this is still an issue — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2880?email_source=notifications&email_token=ACFRBDHLY2TUTBAJN4TLFJTQ3FX7FA5CNFSM4JOMWHH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHZQ5NA#issuecomment-569577140>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACFRBDHDZNXDZ3V76DEULHTQ3FX7FANCNFSM4JOMWHHQ> .

--

…

---Lee RobinsonSoftware Engineer & VideographerWebsite:https://leerob.io Email:lrobinson20111@gmail.comPhone:515-250-0129

[quantizor]

Ok, do you have a more current reproduction? I see the linked issue in the OP is closed.

[leerob]

Yep, sorry about that. I ended up closing that PR and turning on the dark mode by default.

Here's a new PR that adds the dark theme toggle back in. Should be able to reproduce from here.

leerob/leerob.io#135
https://leerob-git-use-dark-mode-toggle.leerob1.now.sh/

[quantizor]

leerob/leerob.io#135 (comment)

[mohsen1]

Setting visibility to hidden is not the best solution IMO. You can use native HTML capabilities for requesting dark theme stylesheet from the server.

<link href="default.css" rel="stylesheet">
<link href="dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">

Styled Components should render the same class names if your theme objects are having identical structures (property names and tree structure)

How you add those <link> elements to your Next.js build is something I'm not really familiar with because I haven't used Next.js much.

/cc @brianlovin