-
-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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
SSR+Suspense: the fallback slot is not hidden after hydration #7180
Comments
It will be fixed in #7188 |
@liulinboyi |
@edison1105, as I see it, the mismatch issue is only reproducible in the playground environment. |
As I understand that
|
Vue version
3.2.45
Link to minimal reproduction
https://github.com/Alexis2004/vue-ssr-suspense-fallback-issue or https://sfc.vuejs.org/#__DEV____SSR__eNqVU01vm0AQ/SvT7QEs2WClzcUlVqr00lulVj1x2cDYpYFZtLvYtSz+e2eXj4CTuooPFsO8eTPz5nEWn+s6OjQoNiKxWNWltLhNCSDJi4N/APhyIlkVGWRlgWRBUXmCgywb3EBirFa0357PkHeony4BbZvEfcqTxQPbhDb53pgaySDYokLV2LtUrFPRZzk/zAPvc9zJprRjipMPiqybJn7Gx7MFLih2siwfZfY05XiepfsNnKWSeUH7KIom4HGFV3sl8bDNbOEZjkOT6aJ2exRVrbQFlg13BeGD4pi49xI07qCFnVYVBHyYYMQO03WpKO5jdz0GpYR/PKzX6pI4PLu5+ER8tYCPHixdnA1pswEPGEXw6db/G7RNHS4GQKbIMP303Hdu6jAgpgoWnzoYV/3o7hpy7d12KIdZaeSNxASBfwj64nYJt+u1o+pizSNoep3Cz8glvrRNqV043XulxVJ08q0qWUe/jSJ2uqdJ+4RJxbh7KlhMF6fil7W12cRxQ/XTPmKd4nvOxboh59ZVrqr7D9FN9PGWL23s9H2Eplo9anU0qLljKvoBPXnMLw+oVxopR436arML7KzhRe5F00EMFmBilGuf+degcrd10Hf/9zCUkvb8xTr9rvh5ZmV/zjfYtB+8s6o0J8ouvSiPsrBAeIRv3KUwGIYajSoPOLfcCzP2qLBh+dwA+WIJN+vOct5N//JebzMeyUNGo6Uk2r8aML9O
Steps to reproduce
Open the prepared sfc.vuejs.org link
or
Clone prepared github-repo, run
yarn install && yarn dev
and open http://localhost:3000 URL in the browserWhat is expected?
Application root component will be rendered on the server to:
and will not change after client hydration.
What is actually happening?
Application root component rendering on the server to:
and then replaced on client during hydration with:
As you can see
Suspense
's fallback slot content for some reason it still shows up.System Info
Any additional comments?
Client only rendering (if not html markup provided from SSR) works as expected. SSR rendering also works as expected. The only appears during client hydration.
An important condition for reproducing the bug is the presence of a
dynamicValue
reactive variable that changes the root component template (located outside theSuspension
tag).In my project, the variable affects the name of the class that I add to the container depending on the width of the current window, but for the example, I replaced this with displaying the value of the variable in the template, and I change the variable itself inside
setTimeout
.If you comment out line
dynamicValue.value = 'value';
then the hydration starts working as expected.The text was updated successfully, but these errors were encountered: