Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nuxt bridge - On ssr no css is inlined which causes page style flicker #159

Open
MikeSaprykin opened this issue Feb 3, 2022 · 7 comments
Open

Nuxt bridge - On ssr no css is inlined which causes page style flicker #159

MikeSaprykin opened this issue Feb 3, 2022 · 7 comments

Comments

@MikeSaprykin
Copy link

MikeSaprykin commented Feb 3, 2022 •
edited

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Clone repository windicss-nuxt-bridge-reproduction
  2. Run commands
yarn install
yarn build
yarn start
  1. See error on http://localhost:3000

Expected behavior
Used css should be inlined on server side to prevent styles flickering on html rendering.
You'll see a red page, in center white text and three colored boxes without flickering.

Screenshots
Initial paint:
Знімок екрана 2022-02-03 о 14 43 14

After windi styles injected:
Знімок екрана 2022-02-03 о 14 43 23

Additional context
package.json deps versions

"dependencies": {
    "core-js": "^3.19.3",
    "nuxt-edge": "latest",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxt/bridge": "npm:@nuxt/bridge-edge",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "nuxt-windicss": "^2.2.4"
  }

SSR generated html ( no injected windi styles )

<!DOCTYPE html>
<html lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D">
   <head >
      <title>windi-bridge-reproduction</title>
      <meta data-n-head="ssr" charset="utf-8">
      <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
      <meta data-n-head="ssr" data-hid="description" name="description" content="">
      <meta data-n-head="ssr" name="format-detection" content="telephone=no">
      <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
      <link rel="preload" href="/_nuxt/1f241e1.js" as="script">
      <link rel="preload" href="/_nuxt/4505b07.js" as="script">
      <link rel="preload" href="/_nuxt/687fcb5.js" as="script">
      <link rel="preload" href="/_nuxt/c61538a.js" as="script">
      <link rel="preload" href="/_nuxt/556693f.js" as="script">
      <link rel="prefetch" href="/_nuxt/b2f682b.js">
      <link rel="prefetch" href="/_nuxt/eb76f2f.js">
      <style data-vue-ssr-id="20c5f194:0,2838a372:0">.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}
         body,html{height:100%}
      </style>
   </head>
   <body >
      <div data-server-rendered="true" id="__nuxt">
         <!---->
         <div id="__layout">
            <div class="bg-red-300 w-full flex flex-col h-screen items-center justify-center px-4 py-4">
               <p class="text-white text-2xl">Should be initially white</p>
               <div class="flex mt-4">
                  <div class="h-8 w-8 bg-green-400 mr-2"></div>
                  <div class="h-8 w-8 bg-blue-400 mr-2"></div>
                  <div class="h-8 w-8 bg-yellow-400"></div>
               </div>
            </div>
         </div>
      </div>
      <script>window.__NUXT__=(function(a,b,c){return {layout:"default",data:[{}],fetch:{},error:c,serverRendered:true,routePath:a,config:{_app:{basePath:a,assetsPath:b,cdnURL:c,buildAssetsDir:b,baseURL:a},app:{basePath:a,assetsPath:b,cdnURL:c,buildAssetsDir:b,baseURL:a}},_asyncData:{},_errors:{}}}("\u002F","\u002F_nuxt\u002F",null))</script><script src="/_nuxt/1f241e1.js" defer></script><script src="/_nuxt/4505b07.js" defer></script><script src="/_nuxt/687fcb5.js" defer></script><script src="/_nuxt/c61538a.js" defer></script>
   </body>
</html>
@MikeSaprykin MikeSaprykin mentioned this issue Feb 4, 2022
Open
@MikeSaprykin
Copy link
Author

That's possibly a Nuxt bridge issue
nuxt/bridge#26

@AndrewBogdanovTSS
Copy link

any update regarding this issue?

@harlan-zw
Copy link
Member

Hey, we need this PR merged and it should fix it nuxt/framework#7160

@AndrewBogdanovTSS
Copy link

@harlan-zw the PR was merged but I still see the issue when nitro is enabled. My info

Nuxt project info:

------------------------------
- Operating System: `Windows_NT`
- Node Version:     `v16.14.0`
- Nuxt Version:     `2.16.0-27711384.54e852f`
- Package Manager:  `pnpm@7.11.0`
- Builder:          `webpack`
- User Config:      `alias`, `autoImports`, `bridge`, `build`, `buildModules`, `componen
ts`, `head`, `modules`, `plugins`, `polyfill`, `privateRuntimeConfig`, `publicRuntimeCon
fig`, `pwa`, `router`, `screen`, `storybook`, `svgSprite`, `windicss`, `serverHandlers`,
 `devServerHandlers`- Runtime Modules:  `@nuxtjs/svg-sprite@0.5.2`, `vue-screen/nuxt`   
- Build Modules:    `()`, `nuxt-windicss@2.5.1`, `@pinia/nuxt@0.4.2`, `@vueuse/nuxt@9.2.
0`, `@nuxt/bridge@3.0.0-27700335.6dfc006`
------------------------------

@AndrewBogdanovTSS AndrewBogdanovTSS mentioned this issue Sep 13, 2022
Closed
@mhdSid
Copy link

mhdSid commented Aug 30, 2023

Im facing similar issue with Nuxt3.
I have ran an experiment with similar page being ran under two nuxt versions: v3.x (latest), v.2.15.8
v3.6.5 has issue with inlining scss on ssr so it causes the page to flicker

@mhdSid
Copy link

mhdSid commented Aug 31, 2023

Fixed form my side by adding optimization level to the css

@AndrewBogdanovTSS
Copy link

@mhdSid could you provide more details on your configuration?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@AndrewBogdanovTSS @harlan-zw @mhdSid @MikeSaprykin