Скачать или смотреть ASTRO VS NEXT.JS which Renders FASTER? 😱

Hello everyone, I'm going to be talking about Astro and Next.js and which ones can render your pages quicker. Rendering quickly is not only good for having fast load times, but also for SEO and for having your page load quicker for the search bots. So Astro, unlike traditional frameworks, they can actually deliver content to your page with no JavaScript, just HTML and CSS. And the way they do that is by rendering your content server-side first, and then they just deliver the pure HTML and CSS. Next.js also does a good job at rendering your content on time. They have a feature called Get Static Props. Anything that you put within the function will be rendered server-side first and then sent to the client. So we're going to do a little speed test and see which one is faster. So first one we're going to test out is Next.js with Next.js. I have everything in Get Static Props, as we mentioned before. This is blog data that I'm getting from my headless CMS. This is the content that we're fetching. It's all in Markdown format. So we are going to open up our Network tab here, run the test, and see how fast we load. All right. So I'm going to do a few tests here to see. First one was pretty quickly. You know, we have a borderline higher than a second. Let's try this again. Oh, this one was even faster. Let's try it one more time. So as you can see, this server-side rendering is extremely quick. If we look at our web metrics, we have very good markings across the board. So let's go on to astro.js next. So here we have Astro. Astro has their Astro components, as well as you can import whatever UI you want. In this case, I'm using React. But you will see that even though I'm not using the Astro component, which is a little bit quicker, we still get some incredible speeds on Astro. So I'm going to load up my Astro. We're going to clear. I'm going to refresh. Look at that. This is almost half of what we got for using Next.js. Let's try it again. Again, look at that. Very quick render times. Let's look at our metrics. So as we can see, our metrics are pretty good, except for cumulative layout shift. Next.js actually has some optimization features that are built in that will get your images optimized. So I think that's what's happening right here, where we're getting just a little bit more of a layout shift. But overall, not too bad. I must say, though, that I'm probably going to go ahead and stick with Next.js for my blog. The reason being is that I'm going to disable Control-Shift-P. You can bring up your JavaScript, disable... Hold on. Let me try that again. Disable JavaScript. Oh, that's not right. Control-Shift. Okay, I want to disable my JavaScript so I can show you something. Let me see what's going on. How to disable JavaScript. Okay. That'll probably work, but there's a faster command to do it than I'm looking for. Control-Shift-P. Why did that not work? Let me try that again. Oh, here's why. I already had a... Okay, see, that's what I want to show you. So right now, we actually have no JavaScript going to the frontend. Even though I'm generating this in a React component right here, we actually... ...on the XJS. And you can tell by this little bracket right here that JavaScript's disabled. So let me actually try and re-enable JavaScript here to see if we have the same speeds. Enable JavaScript. Enable... Why is this so difficult? Control-Shift. Oh. Well, here we go. It's already enabled. I don't know why this thing keeps fixing itself, but... Let's look at our Network tab. Ah. So when we have JavaScript enabled, it looks like we're a little bit slower, actually. But still pretty fast regardless. Let's look at our metrics. Still very good across the board. Now, in Astro, I do have JavaScript enabled, but the thing with this one is... ...I wouldn't be able to disable JavaScript as it is, or else it won't load. The reason being is because I am loading it onto a React component that needs to be rendered in Astro. I could bypass that by programming it into one of Astro's native Astro components. However... The kind of programming style for it is a little bit different from React. I actually don't know if it would be worth it to... Even though it's pretty fast, it adds more development time to being able to have to do... ...all my React component work in Astro and go backwards and forwards. So just from a developmental standpoint, I'm probably going to continue on learning Net or Next.js. But I just wanted to say that this is extremely fast. If you're looking for a fast framework, I think you can't go wrong with doing Astro or Next.js. But I'm going to do Next.js for now. Thank you. you