Blocking resource view rendered in template #1119

ogesaku · 2023-05-29T06:02:43Z

I'm trying to create an SEO-friendly html response with blog post content using a create_blocking_resource.

#[component]
fn Post(cx: Scope) -> impl IntoView {
    let post = create_blocking_resource(
        cx,
        || (),
        |_| async move {
            get_post(0)
                .await
                .map(|data| data.ok_or(PostError::PostNotFound))
                .map_err(|_| PostError::ServerError)
                .flatten()
        },
    );
    let post_view = move |cx| {
        post.with(cx, |post| {
            post.clone().map(|post| {
                view! { cx,
                    <h1>{&post.title}</h1>
                    <p>{&post.content}</p>
                    <Title text=post.title/>
                    <Meta name="description" content=post.content/>
                }
            })
        })
    };

    view! { cx,
        <Suspense fallback=|| "Loading post...">
            {post_view(cx)}
        </Suspense>
    }
}

In the browser, all looks well. When I enter the blog post page, the page is rendered with blog post content (fallback does not appear), but when I check the response using curl I can see that the blog post content is not rendered in its final destination:

<!-- removed head, comments and scripts -->
<body>
  <!>Loading post...
  <template id="0-0-4-1-2-0-0f">
    <h1 id="_0-0-4-1-2-0-5">My first post</h1>
    <p id="_0-0-4-1-2-0-6">This is my first post</p>
  </template>
</body>

I would expect to get:

<body>
    <h1>My first post</h1>
    <p>This is my first post</p>
</body>

The text was updated successfully, but these errors were encountered:

gbj · 2023-05-29T10:37:20Z

Are you familiar with the ssr prop on a <Route/>? There is now an SsrMode::PartiallyBlocked which combines out-of-order streaming with replacing the fallback HTML for suspended fragments that use blocking resources on the server rather than in the browser. Otherwise you can use SsrMode::Async or SsrMode::InOrder and both will wait for suspended chunks on the server entirely.

ogesaku · 2023-05-30T06:30:30Z

Thanks, with PartiallyBlocked it works perfectly.
Is there usage for create_blocking_resource with other ssr modes?

gbj · 2023-06-02T12:30:38Z

Is there usage for create_blocking_resource with other ssr modes?

In any SSR mode, create_blocking_resource prevents the server from sending any part of the HTTP response until any suspense that has read from that resource has loaded. This is useful for doing things like setting headers or <head> tags.

g2p · 2023-09-21T12:33:50Z

FWIW, I think there's room for improving the documentation. The way I read the book page on SSR modes, and even when looking at the SsrMode docs (I must have skimmed past the enum values), I though partially-blocking mode described the combination of SsrMode::OutOfOrder with create_blocking_resource. I think the book page should mention the flag values, and the docs for create_blocking_resource should as well. Will try to send a PR.

Meant to address users making the same mistake as leptos-rs#1119

…rces (#1765) Meant to address users making the same mistake as #1119

gbj added the support label May 29, 2023

gbj closed this as completed Jun 2, 2023

g2p added a commit to g2p/leptos that referenced this issue Sep 21, 2023

Better document the interaction of SsrModes with blocking resources

409bdce

Meant to address users making the same mistake as leptos-rs#1119

g2p mentioned this issue Sep 21, 2023

Better document the interaction of SsrModes with blocking resources #1765

Merged

g2p added a commit to g2p/leptos that referenced this issue Sep 21, 2023

Better document the interaction of SsrModes with blocking resources

d71a04f

Meant to address users making the same mistake as leptos-rs#1119

gbj pushed a commit that referenced this issue Sep 22, 2023

docs: better document the interaction of SsrModes with blocking resou…

d651400

…rces (#1765) Meant to address users making the same mistake as #1119

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blocking resource view rendered in template #1119

Blocking resource view rendered in template #1119

ogesaku commented May 29, 2023 •

edited

Loading

gbj commented May 29, 2023

ogesaku commented May 30, 2023

gbj commented Jun 2, 2023

g2p commented Sep 21, 2023

Blocking resource view rendered in template #1119

Blocking resource view rendered in template #1119

Comments

ogesaku commented May 29, 2023 • edited Loading

gbj commented May 29, 2023

ogesaku commented May 30, 2023

gbj commented Jun 2, 2023

g2p commented Sep 21, 2023

ogesaku commented May 29, 2023 •

edited

Loading