Auto Suspense for async Root Layout or async Page?
Unanswered
Blue whiting posted this in #help-forum
Blue whitingOP
When the root layout or the page is async component, does Next.js auto apply Suspense even without loading.js or actually use Suspense components?
I always get the following HTML snippet when the root layout or page is async components.
Is the default behavior of Next.js?
Can I disable the behavior?
I always get the following HTML snippet when the root layout or page is async components.
Is the default behavior of Next.js?
Can I disable the behavior?
<template id="B:0"></template>
...
<script>
$RC = function(b, c, e) {
c = document.getElementById(c);
c.parentNode.removeChild(c);
var a = document.getElementById(b);
if (a) {
b = a.previousSibling;
if (e)
b.data = "$!",
a.setAttribute("data-dgst", e);
else {
e = b.parentNode;
a = b.nextSibling;
var f = 0;
do {
if (a && 8 === a.nodeType) {
var d = a.data;
if ("/$" === d)
if (0 === f)
break;
else
f--;
else
"$" !== d && "$?" !== d && "$!" !== d || f++
}
d = a.nextSibling;
e.removeChild(a);
a = d
} while (a);
for (; c.firstChild; )
e.insertBefore(c.firstChild, a);
b.data = "$"
}
b._reactRetry && b._reactRetry()
}
}
;
$RC("B:0", "S:0")
</script>11 Replies
Blue whitingOP
Thanks for the reply.
Check the doc before.
But my situation are that
1. Use async root layout or page
2. No loading.js
3. No Suspense boundary
And my question is that why I still get the HTML with loading.js or suspense boundary even though I don't use either
Check the doc before.
But my situation are that
1. Use async root layout or page
2. No loading.js
3. No Suspense boundary
And my question is that why I still get the HTML with loading.js or suspense boundary even though I don't use either
if a page is async it automatically has a suspense boundary
Blue whitingOP
Could I know where the doc mention this one? even for the root layout?
Pip gall wasp
Blue whitingOP
this one points async page automatically has suspense boundary?
I don’t see any content points that
if you want to request the docs be updated, feel free to open a github issue... your question has been answered though.
Blue whitingOP
hmm...
Because I think it doesn't answer my question.
In the beginning, I just got a link without any explanation, so I clarified my question. Then I got a short reply, maybe just for my half-question. And I want to know where I can find this information. But I got another screenshot, and the content seemed unrelated to my question. Obvious that I have to ask why this screenshot, but just say that my question is answered, and feel free to open a GitHub issue. So why just post a doc link in the beginning and answer a reply that the doc doesn't have it? That's why I doubt the answer.
I'm very thankful for the answer, and some guys are willing to answer the questions. I appreciate that.
I'm not a native speaker, and I try to be polite. While my reply might not be so polite, I didn't know that. If you feel uncomfortable, that's not my intention, and I'm very sorry.
Because I think it doesn't answer my question.
In the beginning, I just got a link without any explanation, so I clarified my question. Then I got a short reply, maybe just for my half-question. And I want to know where I can find this information. But I got another screenshot, and the content seemed unrelated to my question. Obvious that I have to ask why this screenshot, but just say that my question is answered, and feel free to open a GitHub issue. So why just post a doc link in the beginning and answer a reply that the doc doesn't have it? That's why I doubt the answer.
I'm very thankful for the answer, and some guys are willing to answer the questions. I appreciate that.
I'm not a native speaker, and I try to be polite. While my reply might not be so polite, I didn't know that. If you feel uncomfortable, that's not my intention, and I'm very sorry.
Blue whitingOP
This answer is not entirely correct.
After trial and error, I have identified one additional factor that needs to be taken into consideration, and that is the use of the “next/dynamic†feature.
For example:
1. In the case of a root layout being an async component and page.js being an async component, with the Main component imported inside page.js, we obtain the HTML without the Suspense component wrapped around it.
2. However, if the root layout is an async component and page.js is a regular component(or async component), with the Main component being dynamically imported inside page.js, we can obtain the HTML with the Suspense component wrapped around it.
3. In the case where neither the root layout nor page.js is async, both being regular components, and the Main component is dynamically imported inside page.js, we can obtain the HTML without the Suspense component wrapped around it.
It’s not just async page component that always get the Suspense feature.
After trial and error, I have identified one additional factor that needs to be taken into consideration, and that is the use of the “next/dynamic†feature.
For example:
1. In the case of a root layout being an async component and page.js being an async component, with the Main component imported inside page.js, we obtain the HTML without the Suspense component wrapped around it.
2. However, if the root layout is an async component and page.js is a regular component(or async component), with the Main component being dynamically imported inside page.js, we can obtain the HTML with the Suspense component wrapped around it.
3. In the case where neither the root layout nor page.js is async, both being regular components, and the Main component is dynamically imported inside page.js, we can obtain the HTML without the Suspense component wrapped around it.
It’s not just async page component that always get the Suspense feature.
mmmmmmk