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

Nested components in server:defer #11518

Open
1 task
jamesli2021 opened this issue Jul 21, 2024 · 3 comments
Open
1 task

Nested components in server:defer #11518

jamesli2021 opened this issue Jul 21, 2024 · 3 comments
Assignees
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: server islands Related to Server Islands (scope) requires refactor Bug, may take longer as fixing either requires refactors, breaking changes, or considering tradeoffs

Comments

@jamesli2021
Copy link

jamesli2021 commented Jul 21, 2024

Astro Info

Astro                    v4.12.2
Node                     v20.15.0
System                   macOS (arm64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

<Nav/> astro component is in OtherPage.astro, the client-side JavaScript document.getElementById could not detect the HTML in ID, which assume the script has executed before the component is render?

<OtherPage server:defer pathname={Astro.url.pathname}>
          <Fragment slot="fallback">
            <div class="min-h-20">s</div>
          </Fragment>
        </OtherPage>

Removed server:defer will work as usual, in SSR mode.

What's the expected result?

How should this situation be dealt with?

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-nuaezo-kcb88z

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Jul 21, 2024
@ematipico ematipico added needs repro Issue needs a reproduction and removed needs triage Issue needs to be triaged labels Jul 21, 2024
Copy link
Contributor

Hello @jamesli2021. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

@jamesli2021
Copy link
Author

I couldn't see clearly with bad editor on this site that's deteriment to my vision, but you get the idea from my code.
https://stackblitz.com/edit/github-nuaezo-kcb88z

@ematipico ematipico added needs triage Issue needs to be triaged and removed needs repro Issue needs a reproduction labels Jul 21, 2024
@matthewp matthewp self-assigned this Jul 22, 2024
@matthewp matthewp added the - P4: important Violate documented behavior or significantly impacts performance (priority) label Jul 29, 2024
@github-actions github-actions bot removed the needs triage Issue needs to be triaged label Jul 29, 2024
@matthewp matthewp added needs triage Issue needs to be triaged feat: server islands Related to Server Islands (scope) and removed needs triage Issue needs to be triaged labels Jul 29, 2024
@matthewp
Copy link
Contributor

This does work if you enable directRenderScript: https://docs.astro.build/en/reference/configuration-reference/#experimentaldirectrenderscript

As this option will likely be the default in 5.0 I think we'll not try to fix this with that option turned off.

@matthewp matthewp added the requires refactor Bug, may take longer as fixing either requires refactors, breaking changes, or considering tradeoffs label Jul 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: server islands Related to Server Islands (scope) requires refactor Bug, may take longer as fixing either requires refactors, breaking changes, or considering tradeoffs
Projects
None yet
Development

No branches or pull requests

3 participants