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.

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

Virtual Scroll, SSR: Hydration style mismatch #17948

Open
209 opened this issue Apr 3, 2025 · 2 comments
Open

Virtual Scroll, SSR: Hydration style mismatch #17948

209 opened this issue Apr 3, 2025 · 2 comments

Comments

@209
Copy link

209 commented Apr 3, 2025

What happened?

I catch Hydration style mismatch, because localResetVirtualScroll in onBeforeMount is called, sets zero values, and after mounting sets the required values.

  - rendered on server: style="height:0px;--q-virtual-scroll-item-height:24px;"
  - expected on client: style="height:168px;--q-virtual-scroll-item-height:24px;"

What did you expect to happen?

It is expected that the styles will match

Reproduction URL

I don't know where i can use ssr in online ide

How to reproduce?

Try to use Virtual Scroll with SSR

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

Operating System - Darwin(22.5.0) - darwin/x64
NodeJs - 20.11.1

Global packages
  NPM - 10.2.4
  yarn - 1.22.19
  pnpm - Not installed
  bun - 1.2.0
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.17.6 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.5 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.15 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - 2.3.0 -- Intuitive, type safe and flexible Store for Vue
  vite - 6.0.7 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.17.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.24.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.7.2 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - macs-MacBook-Pro.local
  en0 - 10.0.10.68
  utun7 - 172.19.0.1

Relevant log output

Additional context

No response

Copy link

github-actions bot commented Apr 3, 2025

Hi @209! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, CodeSandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

@209
Copy link
Author

209 commented Apr 8, 2025

q-virtual-scroll doesn't support ssr: don't render content, because default state:
const virtualScrollSliceRange = ref({ from: 0, to: 0 })

virtualScrollSliceRange has changed on lifecycle hooks which don't call in ssr

    <q-virtual-scroll
      ref="$virtualScroll"
      style="height: 500px"
      :items="items"
      v-slot="{ item, index }"
    >
      <q-item :key="index">
        {{ item }}
      </q-item>
    </q-virtual-scroll>
Image (disabled javascript)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant