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

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

Delba

43,989 Aufrufe • vor 2 Jahren