ฝัง
- เผยแพร่เมื่อ 2 ธ.ค. 2024
- Next.js 13 introduced a new file convention, loading.js, to help you create meaningful Loading UI with React Suspense. Watch Sam Selikoff show a demo in three minutes. Try Vercel today: vercel.fyi/trypro
💻 Resources:
◆ Loading UI: beta.nextjs.or...
◆ Rendering: Server and Client Components: beta.nextjs.or...
#vercel #nextjs
that's awesome, can't wait for the app directory to be ready for production
Making a personal project with the new app directory. Already loving it. Patiently waiting for it to be off-beta.
I couldn't wait any longer and have already started using for my side projects! >_
@@codekaze haha. I am actually using it on a serious project. But it's not a client project, so I know I will be only screwing myself if something goes sideways. But gotta say I love it.
The simplicity is so good man, just hope soon goes off from beta into stable haha😂
React js is a blasphemy for JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated.
Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening.
Svelte and react have confusing code. Developer experience matters.
Those who use and support react nonsense are brainless slaves, I would like to become a world ruler just to ban this react f nonsense. This is an unforgivable filthy library that no one asked for.
holy shid i was legit JUST searching for this. thank you this is a gem
Can we get the full className of the span element, the loading animation looks great! Thanks
This man recorded the whole video just to show killer pulse loading animation👏
loving the way loading works. You just create a new file with loading and booms done.....
I noticed this just yesterday doing some user testing on a site I'm working on with Next 13. SO awesome.
Very cool developments being made over at Vercel!
I wish the app directory was not beta! I'd be working on the migration right away.
Oh God, sometimes I think too much magic can be a problem, but DAMN! I'm loving it!!! NEXTJS is my number one Framework of choice.
Damn, this stuff is amazing. I think we're finally settling down with the hybrid applications & awesome UX.
We have arrived at 2014 Ember.js… fitting that Sam is presenting!
This is awesome! So this is gonna work with version 13 by default or do i have to opt in to use the app directory?
Wow, didn't know this guy worked for Vercel! Props to him
aight, I choose nextjs from today onwards hehe
I use both Next js and Nuxt (Vue) and they are both cool. However, writing React is somehow gives me more development pleasure. idk if it's magic or smth, but I really noticed it during my work 😁
Great video! Could you by any chance share the code for this example? Would appreciate it!
What are the effects of this for SEO?
I actually prefer a progress bar on the top of the page over this, which works with the "old" approach as well.
dude this is not android to place progress bar, shimmering effect looks sick
Nice tech, I can't wait to make a todoapp with it.
what if I am using pages routing within a nextjs 13 project, is loading.js available?
01:33 next 13 router cache ? any documentation about this ?
Amazing technology. For Seo, will the list of posts be empty when a google bot crawls it? If I want the posts to be available for the google bot crawlers do I still need to do a static page?
can we use this suspense with useEffect, as we do not need to hit only GET apis we need others too, so we are required to have useEffect, i am struggling to use suspense with useEffect
Wow! that's amazing and so easy to implement.
is there a way to make this without loading a data from an API or something? like whenever the window/tab is loading it shows the loader and when the window/tab is loaded it removes the loading screen. (Again, not by API data or anything)
That is awesome, is it possible to do the loading screen only when switching pages not on initial load?
When to use getstaticprops and Async function ? I am building my pages in Page Folder not in App folder
if u follow this approch and the add the new post the data will not show instantly : unfortunately
Do you mind sharing the name of the VS theme?
Is there a way to provide a minimum "loading screen" time threshold only if the content doesn't already exist in server cache?
That could be super helpful. If the page loads very quickly, the loading screen just flashes for a split second. I’d love to hear what’s the best way to achieve it!
when use loading.tsx, does the SEO crawler can get the post content?
do you have the repo only for example
Thank you!
How to implement a "See more" button behaviour with a next js server component ?
I missing actually using the element. I get why it's not necessary. I wonder where we might use it in the future?
Thank you. But loading works only during render SSR files. But if i'm using client side properties for change status of certain elements and during refresh or first load it shows all unstyled elements till all page has been loaded, and my loading page doesn't work. Do you have some advice please?
If loading UI is shown when the page is directly accessed by URL then wouldn't it hurt the SEO? If I were to show blog post then SEO would see the placeholder thumbnail and skeleton loader instead of the actual content.
Good point! Isn't that what we are trying to avoid with SSR in the first place?
That was also my initial thought. But I think the crawler sees that there is still a request pending, waits for the request to finish and takes the final page then.
@@glapps Lee Robinson who works at Vercel said: "The architecture for loading has been designed to not disrupt web crawlers when indexing pages."
@@codinginflow It is actually streamed in from the server
@@Dev-Siri cool, thanks for the info ✌️
Do you have to be using the new app directory for this? It's not working on my project but I am not using the app directory since they say that it's still not production ready.
Amazing video thanks so much.
so no conditional checking for isLoading or error state? can we just call the api with no try catch a bit confused
I actually tested and i will use it on my personal web.
Thank you.
It gives me Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. can you help me solve it ?
@@montasirmahmud3585 are you trying to fetch data using async/await in a client component?
You can only use async/await in server components.
It is recommended to do any data fetching inside a server component and then pass it to a server/client component.
But if for some reason the data can't be fetched on the server, use the `use( )` hook.
Any chance you could share the GitHub repo?
Most awaited features 😊
Does the SSR-Route work without enabled JavaScript with that new Next 13 approach?
I hope that libraries will catch up soon.
Css-in-js libraries can't be used in server components, which seems odd? Is there anything that can be done about that? Is this something the libraries need to fix or is this just impossible and does all the style generation needs to happen on build time?
Tailwind seems to be the only thing that works right now.
check jack herringtons channel he did a video recently on it explaining why it won't work, with a workaround as well
@@musagillani5399 im sorry but in jack's video I was not able to find a solution for the css-in-js in server components. I have understood the solution for state management but not for the styles in fact. Can u explain a bit about?
Wanna know that too
React js is a blasphemy for JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated.
Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening.
Svelte and react have confusing code. Developer experience matters.
im just thinking, about if we have multiple load data, we need also 1 by 1 loading state on each section.
do we need to copy and paste the template or any magic things to do it ?
Quick question. If i want to implement this loader in multiple components, do i have to recreate the same file. Also, when wrapping a conponent in suspense, why it never shows up. Does it load too fast or what. Please answer
So all I have to do is add in a loading.tsx? I don’t have to wrap the layout in anything?
I’m unable to get this to work - does it only work if the data is fetched using fetch API?
same
Sadly there's no way to show any feedback when executing a server action, and the data is being streamed. It seems it's not possible to add hooks to the streaming life-cycle.
For example, if I have a list of users, execute a server action for "adding a user" (which executes revalidatePath), then I can show a loading spinner during the duration of the action, but once the action is done, the spinner will disappear, and there's no way to know when the new data will arrive (which can be several seconds after the spinner disappeared).
why it doesnt work on main page?
I love nextjs but after nextjs 13 update. My local development "npm run dev" is too much slower and even after i stop server it keeps running and open new terminal in my window pc. I tried another and got the same result. Hope to get this fixed soon.
I don't see any step that you use Loading component with Suspense causes a little bit confused here
That's amazing. I tried upgrading my project to version 13 the other day but got stuck on SSR not working with MUI, hope that gets fixed!
Because Most of the libraries use some React Features which are client side, thats why u probably have to declare „use client“ on the first line of your component (because its Server component by default now)
@@ousmane15 but how do those components work with the old useStaticProps/useServersideProps?
@@bernardorosa6907 they don't
What framework do you recommend to use with nextjs? I always use MUI but in react
@@brayandvelasquez2256 mui is perfectly fine to use with Nextjs, version 13 doesn't mean you have to use the beta and unfinished app directory feature
What about bots and SEO in this case? Aren't bots just getting "loading" html peace?
If it's a bot accessing the site (containing bot's UA information), it will get the fully buffered & finished HTML that contains all the necessary information. SEO won't be a problem.
@@shuding could you share an example for this one.
@@shuding doesn't sound pretty solid 🤔
Do you need to import the Loading.tsx file somewhere or how does it work?
*EDIT: Nevermind the documentation in the description explains it very clearly*
No imports needed. Just name it as `loading.tsx` and Next.js will automatically use it as the loading state.
@@shuding Thanks
What's better than solider boy teaching us Next.js.
When opening the page directly on next13, why don't we already get the full page rendered from the server?
We can, it’s just that you’ll be using the browser’s loading instead. The data still has to be fetched (and hence loading) regardless, it’s just that now the server can send a loading state while it is fetching the data, and stream in the data when it’s ready.
Thx!!! That's what I've been looking)
i need help with loading state. can someone help with me?
Nice improvements. Thanks
Is there a component test/documentation tool like storybook that can accept new server components?
Right now it seems we need to do all component test/documentation inside next.js dev server,using environment variables to trigger mock data from server.
"Mock data from server" What do you use for that? MSW(mock service worker)?
The loading.tsx file just works when fetching from the server? Or it also applies to data fetch inside the client side?
I’m sure it’s only configured to work for only server rendered components. I could be wrong but it seems difficult to pull that off for client loading state.
We recommend doing data fetching on the server side in the app directory, for most use cases. For client fetching, you can use manual React Suspense boundaries.
That's awesome！Just write await getSome and loading.tsx is enough
can anyone please share the loading animation css used in this video?
Does anyone know if this it’s possible in remix?
Hi, i can't use loading.js in subfolder(for components)
please add this option
with this option we can make different loadings for each component
You can do this by conditionally rendering within the component. If the component is waiting for some data to render, you can use react suspense to render a loading state until it is finished.
So how to reuse this loading file? like as React? is it possible here?
you can create a loading.tsx (or jsx) at the root of your `app` directory and it will use it for all the subroutes as well.
But you can also create a loading.tsx file in any sub route's folder and it will display that one instead.
Cant wait to try it
For a long time I could not understand why loader does not work. It turned out my data was in the cache!
Vercel making it harder and harder to go for any other hosting provider! I don't mind tho, their service is incredible.
Could you please share the name of the library that created the animate skeletons on the Posts Page?
Looks like he is using TailwindCSS
@@AurelioPita ah, okay. Thank you.
use materialui skeleton :)
@@rawquesh does not work on server components
@@invinciblemode who says? I used material ui in several nextjs apps
Thanks, but you are in local development right? It means the fetch happens at every request.
But in production, you will not see it I belive right?
Sam is killing it.
First of all, great voice... but, I am very confused about this. This is what it says in the docs "Good to know: Previous Next.js data fetching methods such as getServerSideProps, getStaticProps, and getInitialProps are not supported in the new app directory." so how are we able to use that here under the app dir?
Search fetch in the next js documentation
Does it support getStaticProps as well?
You probably could use SSG with this but the loading.tsx will never show because static pages don't need to fetch data/make the user wait during runtime
Could you share repo?
Is there a performance difference between pages and app?
app ships less JS and has some performance improvements.
In the network tab, I noticed that for Static Pages (SSG / ISR) using the app directory, Next.js no longer ships a _ssgManifest.js nor a _buildManifest.js (These file's sizes combined is 1.28kb+ GZipped or for bigger websites it is 30.15kb+ GZipped) so for me it did reduce the first load js of static pages ever so slightly but for bigger websites it can make a significant difference.
And I've noticed that are rendered on the server, it only returns the Generated HTML from the Server (The HTML is faster to parse) & the react client-side runtime, which is around 45kbs compressed. But if you use client-side components in RSCs, it will ship it along with the markup & runtime to add interactivity. (Rendering on the server alone has reduced the size of the JS on the first load by more than 30% for me)
Really Amazing 🔥🔥
loved it loved it loved, when is it gonna be official????
Isn’t this more like client-side rendering again?
wdym?
Is this bad for SEO? The final result looks like a SPA.
Nope, no impact on SEO. The architecture for loading has been designed to not disrupt web crawlers when indexing pages.
Wow that's super cool ❤
Is their a rough timeline on when the App directory will be taken out of beta? Can't wait to go all in on it!
This behaviour is not suitable for adsense or other ads platforms. Because, these platforms need a content rich html page at first load. It is a huge improvement but certain cases.
This behavior is opt-in. You do not need to use it, if for some reason you prefer not to.
Very easy...❤ Next js
Great, now maybe fix mdx-remote so I can actually render posts :)
this is amazing
thanks man
power!!
thank u this is very usefull
so sick
I thought getServerSideProps, getStaticProps, getStaticPaths are gone.
wooooah! this is so cool .
Nice sound
Love it
It was quite easy to make a loading indicator with next 12 by utilizing `router.events.on('routeChangeStart' | 'routeChangeComplete')`. This loading indicator would not replace the whole content instantly. I think the solution presented here is a worse UX.
Is there a way to have the same effect in a next 13 app directory? The router you get from the `useRouter` hook of "next/navigation" has no events.
Wow, it's that easy?
The loading screen made the app seem about 2x slower in this example.
It’s not lo about if it seems slower or faster, but to give feedback to the user the app is doing something and that it’s responding
@@Pyraptor No. If it seems slower the feedback is negating added benefit. You need to use feedback like this correctly so it feels performant and adds feedback.
It’s either they see a white screen from the browser loading, or a custom loading UI from you. The wait is still exactly the same as the server needs to fetch and render the same data.
@@invinciblemode No its not, it's about 1second slower with the loading animation in this example.
@@otockian actually its the same, its just that there is no new screen till the posts screen comes. It took 2 seconds previously and 2 secs when used loading screen. The time between click and posts rendering was almost same for both. Its easy to miss that.
❤️
I just think that the app folder is discouraging for me that has a huge website to convert over to app folder. I have bunch of loading components and error components for each page. Just goes to show now I am in a state where I don't want to start a project, because I know the pages folder will get replaced soon.
welcome to javascript land 101. new framework every day :) hope you enjoy.
The pages and app directories will continue on together for the extended future. We are focusing extensively on incremental adoption and migration.
React js is a blasphemy for JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated.
Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening.
Svelte and react have confusing code. Developer experience matters.
Those who use and support react nonsense are brainless slaves, I would like to become a world ruler just to ban this react f nonsense. This is an unforgivable filthy library that no one asked for.