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

SSG/JSX: SSG supports Suspense #1977

Open
yusukebe opened this issue Jan 14, 2024 · 2 comments
Open

SSG/JSX: SSG supports Suspense #1977

yusukebe opened this issue Jan 14, 2024 · 2 comments
Labels
enhancement New feature or request.

Comments

@yusukebe
Copy link
Member

yusukebe commented Jan 14, 2024 •
edited
Loading

What is the feature you are proposing?

Currently, the SSG Helper does not fully support Suspense.

For example, consider the following example, which returns JSX with AsyncComponet wrapped in Suspense:

app.get('/shops', async (c) => {
  return c.render(
    <div>
      <Suspense fallback={'loading...'}>
        <Component />
      </Suspense>
    </div>
  )
})

The HTML exported by SSG is as follows:

<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="/static/style.css" rel="stylesheet"/>
    </head>
    <body>
        <header>
            <a href="/">top</a>
            <a href="/about">about</a>
            <a href="/shops">shops</a>
        </header>
        <main>
            <div>
                <template id="H:1"></template>
                loading...
                <!--/$-->
            </div>
        </main>
        <footer>
            <address>
                <a href="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/yusukebe/ramen-api">powered by Ramen API</a>
            </address>
        </footer>
    </body>
</html>
<template>
    <ul>
        <li>
            <a href="/shops/yoshimuraya">yoshimuraya</a>
        </li>
        <li>
            <a href="/shops/sugitaya">sugitaya</a>
        </li>
        <li>
            <a href="/shops/takasagoya">takasagoya</a>
        </li>
    </ul>
</template>
<script>
    ((d,c,n)=>{
        c = d.currentScript.previousSibling
        d = d.getElementById('H:1')
        if (!d)
            return
        do {
            n = d.nextSibling;
            n.remove()
        } while (n.nodeType != 8 || n.nodeValue != '/$')d.replaceWith(c.content)
    }
    )(document)
</script>

I would like to show only the list of shops without loading.... This means that the SSG should be executed with the AsyncComponent in Suspense resolved.

However, if we need to add a lot of code to resolve this issue, we can just write in the documentation that "SSG does not support Suspense completely".
@yusukebe yusukebe added the enhancement New feature or request. label Jan 14, 2024
@aretrace
Copy link

Any update on this?

@yusukebe
Copy link
Member Author

Currently, there are no updates on this matter.

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

No branches or pull requests
2 participants
@yusukebe @aretrace