Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

50,434 Aufrufe • vor 1 Jahr •via X (Twitter)

10 Kommentare

Profilbild von Delba
Delbavor 1 Jahr

Docs · Is `loading.js` the same as a `<Suspense>` boundary? Not quite. `loading.js` becomes the fallback UI of a Suspense boundary, but because it is a convention, it can be rendered and prefetched ahead of time. Regular Suspense boundaries need a server round-trip to render their fallback. So, are suspense boundaries bad? No. You can use Suspense deeper in a Page to break up rendering into smaller chunks and stream them as they become available. Since the page is already rendering on the server at that point, no additional round-trip is needed. What about static pages? Pages rendered at build time don't need a `loading.js` file because all their content is already available and can be prefetched when <Link>'d to.

Profilbild von Alex Sidorenko
Alex Sidorenkovor 1 Jahr

delba-remotion-framework when?

Profilbild von Delba
Delbavor 1 Jahr

when the repo isn't this

Profilbild von Coding in Flow
Coding in Flowvor 1 Jahr

Except when you click a link and it takes a second before loading.ts shows up 😆

Profilbild von Umar
Umarvor 1 Jahr

Nextjs sucks waiting for tanstack start stable

Profilbild von Abd Sattout
Abd Sattoutvor 1 Jahr

Another nice video as always, Delba 🤍🔥

Profilbild von Delba
Delbavor 1 Jahr

🤍

Profilbild von Carlos Acosta
Carlos Acostavor 1 Jahr

Is adding a 'loading.tsx' a good approach even if you're using SSR?

Profilbild von Christopher
Christophervor 1 Jahr

Suspense looks so much better than the loading.tsx file

Profilbild von Delba
Delbavor 1 Jahr

Do you mean at the 29s mark? That is using both, loading.js for the form and suspense for inventory and orders. * there is a code mistake here, I should have split the promise.all into separate promises, which are then passed down.

Ähnliche Videos