Next.js vs Astro Rendering Strategies (SSG, SSR, Hydration, and Server Components)
Vložit
- čas přidán 2. 08. 2024
- Next.js vs Astro...which one is better?
Next.js and Astro both support several different strategies for rendering content to the page including SSG (statically generated), SSR (server-side rendered), server components, hydration, and hybrid which mixes all of the above.
Learn more about Astro - astrocourse.dev/
Grovemade link (affiliate) - grovemade.com/?You...
Grovemade coupon code - JAMESQ10
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
*STAY IN TOUCH 👋*
Newsletter 🗞 - www.jamesqquick.com/newsletter
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
*TIMESTAMPS*
00:00 - Intro
01:20 - SSG Static Site Generator
06:20 - SSR Server Side Rendered Content
09:10 - Client Side Rendering or Hydration
09:50 - Astro Islands
12:50 - Next.js App Router Directory
13:50 - Server Components and Streaming
16:40 - Astro Async Data Loading and Streaming
17:30 - Hybrid Rendering
18:15 - Wrap Up
Good stuff!
As for hybrid rendering in Astro, you can also have it the other way round. With output mode 'hybrid', pages are static by default unless you export prerender = 'false'
I've already moved 2 production apps from React to Astro, it's very capable!
Ah very nice!!
Please, please add CMS integration block in your course on Astro. Self-hosted Directus will be optimal.
Cause no client or a blogger will make a serious project writing every post in markdown. Once you add it, I am buying ❤️
haha fair enough. I'm thinking I might add a CMS section to my course. For updates, make sure to sign up for the newsletter astrocourse.dev/
Awesome explanation. I couldn't wrap my head around al the new stuff going on in the web dev space. But this video explains it! Just 👍 gonna bookmark it! looking forward to your Astro course btw
Thanks so much for the positive feedback!
At 17:02 I could be wrong but with Astro with server mode it is a little different. When you make a await async call on the server in an Astro component, all the components and markdown underneath that Astro component making the async call will be blocked until the async call is finished. While with NextJS server components you can have a server component that can make a await async call on server and it won't block components from rendering underneath it till it's finished.
I think I confirmed this Ben Holmes from Astro on a stream recently. They don’t advertise it but I’m pretty sure they’re using streaming
i started using astro yesterday it is great i am currently rebuilding one of nextjs project with it one question in astro is there any way to trigger rebuild using API like using revalidatePath in nextjs
thanks for this video
Hi James! thanks for the explanations. Could you help me with a doubt? Im using Astro + Strapi for build a project by the scratch and everything is new... Im looking for a solution to work with a Design System and when I try use a web component i get an error like "self is not defined", that cames when I find a js import from node_modules. To solve this, Im using the directive client:only and everything works. Is that correct? I mean, have a way to configure all of web component in time of build?
👍
I was waiting for the equivalent for revalidating data on static pages if we make a change in the CMS but you didnt cover that. Any good resource about that?
Well, you could trigger a build of your site automatically when content is updated. Is that what you're looking for?
learned a loooooooooooooooooooooooot !
Yeah! Great to hear!
When is 'build time' in this case? Can't be only when you deploy, surely?
Well you could trigger a built locally if you wanted, but most likely you're doing it your deployment pipeline
All I hear in this video is "Astrojs is king" :)
There's a lot to like! :) I also love Next.js!
I assume this is NextJS 12
Well, the Server Components piece is 13+
I don't get why Astro when you can uncomplicate it... just stick with regular frameworks made for one purpose.
What do you mean by regular frameworks?
ahhhh i'm really depressed another framework ???? can we just stop
hahaha it never ends