Giter VIP home page Giter VIP logo

Comments (11)

brianlovin avatar brianlovin commented on May 22, 2024 1

@leerob thanks for the note, I must be missing it! I'll add it in.

Also, thank you for writing https://leerob.io/blog/mailchimp-next-js - it helped me implement ca3f7b7

Learn how to integrate Next.js and React with Mailchimp to build a newsletter subscription form.

from brios.

brianlovin avatar brianlovin commented on May 22, 2024 1

Hm this is frustrating. I'll see if I can get mxstbr to take a look.

from brios.

leerob avatar leerob commented on May 22, 2024

After reading further into the code, I see you have next-seo! Maybe it's just missing from this file?

I see it working here: https://github.com/brianlovin/brian-lovin-next/blob/7a1fd784475856eeabe0d5b48deb31e9685e05c4/src/pages/design-details/%5Bslug%5D.tsx#L24

from brios.

brianlovin avatar brianlovin commented on May 22, 2024

Super weird, the tags are being set in the <head> - I can see them here: https://github.com/brianlovin/brian-lovin-next/blob/master/src/components/Overthought/Post/SEO.tsx

But the Sharing Debugger isn't picking them up...I wonder if it's an SSR thing.

GitHub
My personal site. Contribute to brianlovin/brian-lovin-next development by creating an account on GitHub.

from brios.

leerob avatar leerob commented on May 22, 2024

I wonder if it's because you're returning null for the first SSR here and then maybe the route is being cached?

I ran into this exact same issue with Next.js + styled-components + useDarkMode and ended up using your workaround. Let me see if the same issue is affecting me.

from brios.

leerob avatar leerob commented on May 22, 2024

I think that's it. I removed the workaround here and it deployed that commit with Now. Looks like it correctly picked up the OG tags now.

What a bummer 😢 I have an issue open on styled-components for this: styled-components/styled-components#2880

from brios.

brianlovin avatar brianlovin commented on May 22, 2024

NOOO!

I think I know of a solution though: instead of returning null we could set a visibility:hidden property on the body of the page...testing.

from brios.

brianlovin avatar brianlovin commented on May 22, 2024

Okay it doesn't work, and triggers the same issue that you pointed out in styled-components/styled-components#2880

from brios.

leerob avatar leerob commented on May 22, 2024

from brios.

brianlovin avatar brianlovin commented on May 22, 2024

This is a very dumb hack, but instead of returning null you can do:

// prevents ssr flash for mismatched dark mode
  if (!mounted) {
    return (
      <div style={{ visibility: 'hidden' }}>
        <Fathom>
          <Sentry>
          <SEO />
            <ThemeProvider theme={theme}>
              <GlobalStyles.ResetStyles />
              {children}
            </ThemeProvider>
          </Sentry>
        </Fathom>
      </div>
    )
  }

In combination with the useEffect and useState to re-render on mount, this seems to be working and I can verify that at least Twitter social cards are working on a test deployment.

from brios.

brianlovin avatar brianlovin commented on May 22, 2024

Still unknown, we'll need to track this in the s-c issue above.

from brios.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.