Flash of unstyled content | Astro Lounge | Page 1

polar flint Feb 4, 2023, 8:31 PM

#

Hey folks! I've been rewriting my personal site using Astro, TailwindCSS and MDX along with Astro 2.0 fantastic content collections API, everything's super cool but after deploying my site to Vercel as static output and Lighthouse testing I'm experiencing the FOUC (flash of unstyled content) problem 😦 The output has 0 client side js, I'm not using any client directives and scripts

BTW thank you guys for developing Astro love it so far and looking forward to do waay more things using it!

My configuration file:

export default defineConfig({
  output: "static",
  integrations: [
    tailwind(),
    mdx({
      rehypePlugins: [
        rehypeHeadingIds,
        rehypeTagIntentsForMdx,
      ],
      remarkPlugins: [remarkReadingTime],
    }),
    prefetch(), // the issue remains if i remove prefetch too
  ],
});

Package versions:

  @astrojs/mdx: 0.14.0
  @astrojs/tailwind: 3.0.1
  astro: 2.0.5

pallid merlin Feb 4, 2023, 8:42 PM

#

There's a bug where MDX can be mistakenly put into the body and not the head. You might be experiencing this. It happens with nested layouts I believe. I'm working on a fix, my top priority, should be out early this week.

#

Put the link tags into the body, that is.

#

I think if you don't use a layout it will work as a workaround. But like I said, this is a priority to be fixed.

polar flint Feb 4, 2023, 9:23 PM

#

Thanks for the quick response @pallid merlin, frankly speaking I'm not sure if this fits in scenario with layouts you mentioned, here's site URL with problem occurring https://astro-neg4n-dev.vercel.app/blog/hacky-linux-so-injection 🥂

pallid merlin Feb 4, 2023, 9:25 PM

#

Not at a computer, is there a link tag in the body?

polar flint Feb 4, 2023, 9:26 PM

#

Yeah.. I guess thats it

#

must have overlooked it

#

this is the only link in the body

pallid merlin Feb 4, 2023, 9:37 PM

#

Yeah :/

polar flint Feb 7, 2023, 8:14 PM

#

👋 Hey @pallid merlin just wanted to deliver big digital thank you for fixing the issue this post is about along with 2.0.7 release 🥂 hope u have nice evening! (its 9 pm CET)

#

Already tested that - working flawlessly

pallid merlin Feb 7, 2023, 8:15 PM

#

So glad to finally get this fixed! I was a little worried we had painted ourselves into a corner where we could not fix all cases.

#Flash of unstyled content