Choosing between SSR, SSG, and dynamic rendering in Astro

Тәжірибелік нұсқаулар және стиль

Join the early access list for my course! learnastro.dev
Astro offers several options for rendering, SSG, SSR, or a combination of the two in either direction (static-first or server-first) with dynamic rendering.
🔗 Key Links 🔗
- docs.astro.build/en/guides/se...
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/microsoft/cascadia...
- Theme: marketplace.visualstudio.com/...
- Icons: marketplace.visualstudio.com/...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen...

Пікірлер: 88

  • @mrrolandlawrence
    @mrrolandlawrence2 ай бұрын

    this astro series is the best out there. saves me fumbling with the core docs. practical examples always help.

  • @CodinginPublic

    @CodinginPublic

    2 ай бұрын

    So glad you’ve enjoyed the videos!

  • @aryomuhammad8254
    @aryomuhammad82543 ай бұрын

    I really love how you explained things with drawing style like this, it really helped a lot. Thank you!

  • @CodinginPublic

    @CodinginPublic

    3 ай бұрын

    You're very welcome! So glad it was such a help!

  • @unity_12
    @unity_1210 ай бұрын

    I can never figure out how it all works. Through videos and diagrams it became clear. I'm waiting for a video with hybrid rendering! I liked the video 😇

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    So glad it was a help!

  • @egrekov
    @egrekov10 ай бұрын

    Please continue this series. It's very useful and important for me. Thank you

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    Glad it was a help!

  • @sonny5497
    @sonny54972 ай бұрын

    this was beautifully explained with diagrams. you are an amazing teacher 🎉

  • @CodinginPublic

    @CodinginPublic

    2 ай бұрын

    Glad it was helpful! Thanks for the kind words!

  • @jamesgrubb
    @jamesgrubb9 ай бұрын

    Thanks for this content and your time. Middleware examples would be great - perhaps authentication / authorisation how-to

  • @CodinginPublic

    @CodinginPublic

    9 ай бұрын

    Working on something right now that could use some middlewear…I'll see about figuring it out and doing a video! Thanks for the comment!

  • @hiryuimajin
    @hiryuimajin10 ай бұрын

    Your teaching is always amazing!

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    Thanks for the kind words! So glad you enjoyed it!

  • @JavArButt
    @JavArButt10 ай бұрын

    I have seen only some of your videos, up to now, I liked them all

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    Thanks, my friend. Glad they’ve been a help!

  • @RodrigoDAgostino
    @RodrigoDAgostino10 ай бұрын

    Such a clear explanation! Thank you for taking the time to not only explain the theory, but to also illustrate it through a good example. I’m really enjoying your content! :)

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    You're very welcome! So glad it was helpful!

  • @murtadha96
    @murtadha9610 ай бұрын

    An absolutely fantastic explanation! Thank you

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    Glad it was helpful!

  • @user-fi7lb4oh2z
    @user-fi7lb4oh2z7 ай бұрын

    Thank you for all your content man!

  • @CodinginPublic

    @CodinginPublic

    7 ай бұрын

    Glad you’re enjoying the channel!

  • @akosbalint3485
    @akosbalint34856 ай бұрын

    Very good explanation. Thank you.

  • @CodinginPublic

    @CodinginPublic

    6 ай бұрын

    So glad it was a help!

  • @sujit_webdev
    @sujit_webdev2 ай бұрын

    Thanks for such an amazing explanation and this extremely useful video!

  • @CodinginPublic

    @CodinginPublic

    2 ай бұрын

    You're very welcome!

  • @systematicpsychologic7321
    @systematicpsychologic73218 ай бұрын

    Thanks, this was a pretty great overview. Simple and informative. Makes me look forward to using Astro in a project.

  • @CodinginPublic

    @CodinginPublic

    8 ай бұрын

    Glad you enjoyed it!

  • @diegoulloao
    @diegoulloao13 күн бұрын

    Amazing explanation. Really clear

  • @CodinginPublic

    @CodinginPublic

    13 күн бұрын

    Glad it was helpful!

  • @Oggy-WanKenobi
    @Oggy-WanKenobi4 ай бұрын

    This is a great resource! Thanks a ton

  • @CodinginPublic

    @CodinginPublic

    4 ай бұрын

    Glad you enjoyed it!

  • @21rogerwaters
    @21rogerwaters10 ай бұрын

    Wow! Thank you! Great visual explanation, please do more like that =)

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    Thanks, my friend. Glad you enjoyed it!

  • @jmonterroso.dev13
    @jmonterroso.dev138 ай бұрын

    Great video as always and yes please, we all want the video of Middleware and astro island!!

  • @oussamasethoum1665
    @oussamasethoum16657 ай бұрын

    This video was so clear and I understood everything, thank you so much.

  • @CodinginPublic

    @CodinginPublic

    7 ай бұрын

    Glad it was helpful!

  • @veggtips.shorts
    @veggtips.shorts8 ай бұрын

    Great content! Love how you explain!

  • @CodinginPublic

    @CodinginPublic

    8 ай бұрын

    So glad it was a help!

  • @rayusaki88
    @rayusaki888 ай бұрын

    Vey helpful. Thanks 🙏🏻. Looking forward on your Astro course

  • @CodinginPublic

    @CodinginPublic

    8 ай бұрын

    So glad it was a help!

  • @latch909
    @latch9098 ай бұрын

    Unbelievable I didn't think to just build locally and look at the difference like this! Super clear information thank you

  • @CodinginPublic

    @CodinginPublic

    8 ай бұрын

    So glad it was a help!

  • @secondubly
    @secondubly7 ай бұрын

    just want to say a huge thanks for this video, it really helped me grasp exactly what adapters and SSR/SSG were doing because reading it in the docs it wasn't really sticking 😅

  • @CodinginPublic

    @CodinginPublic

    7 ай бұрын

    So glad it was such a help! Visuals are often what unlocks concepts for me, so I’m glad it was a help.

  • @LeoMiranda
    @LeoMiranda9 ай бұрын

    Fantastic explanation, thanks

  • @CodinginPublic

    @CodinginPublic

    9 ай бұрын

    So glad it was a help!

  • @andrezorek
    @andrezorek8 ай бұрын

    thank you, so much, dude. great content, very clear, very straightforward.

  • @CodinginPublic

    @CodinginPublic

    8 ай бұрын

    So glad it was a help!

  • @joshreynolds4164
    @joshreynolds41649 ай бұрын

    Visuals really helped on this one!

  • @CodinginPublic

    @CodinginPublic

    9 ай бұрын

    So glad it was a help!

  • @FumezCreates
    @FumezCreates4 ай бұрын

    I love Astro. Your explanation is magnificent

  • @CodinginPublic

    @CodinginPublic

    4 ай бұрын

    Thanks for the kind words!

  • @nickwoodward819
    @nickwoodward819Ай бұрын

    2:54: Now that's a diagram that should be in the docs :)

  • @CodinginPublic

    @CodinginPublic

    Ай бұрын

    Haha glad it was helpful!

  • @funkologie
    @funkologie10 ай бұрын

    Thanks Chris!

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    You’re welcome!

  • @christianseiler1250
    @christianseiler125010 ай бұрын

    Love your Astro videos - extremely clear and step by step. There is one thing I cannot figure out - which is how to access reference() data from a collection properly . Maybe you could do a short video about it one day?

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    So glad you’ve enjoyed them. I think the content collections video should help with that (kzread.info/dash/bejne/rImh08-ug9mwfdY.html). Let me know if you still have questions!

  • @SalvaToroTorus
    @SalvaToroTorus8 ай бұрын

    Excellent

  • @CodinginPublic

    @CodinginPublic

    8 ай бұрын

    Glad you found it helpful!

  • @qasimarif9921
    @qasimarif99217 ай бұрын

    Hey! Love the content man. This was great to watch. I’ve got a mostly static site I’m building in Astro but plan to use some React for components and some packages. Thing is React is quite heavy in size and I’m trying to keep it as light as possible. Would I benefit from using SSR here at all to avoid React being called on the client side? (And avoid that 100kb load as it’s called and rendered on the server?)

  • @CodinginPublic

    @CodinginPublic

    6 ай бұрын

    You’re welcome! Well, if you’re using react, it’ll still load react on the page if you build it server side. You could use the client:visible directive to ensure the react only loads if people get to a section on the page that needs it?

  • @Web-Dev-Codi
    @Web-Dev-Codi10 ай бұрын

    I have been thinking about messing around with Astro for a while. I will be making the jump for sure after seeing this video. I love the illustrated visual aspect in this one. What program are you utilizing for the demonstration?

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    So glad it was a help! It’s called TLDraw, I think.

  • @tiscover
    @tiscover10 ай бұрын

    As always - great video Chris! Is there a way that Astro only renders "new" content? This would be really helpful in combination with a CMS: Let's say a client changes some text in the CMS and Astro does not generate the whole site, but only the text that was changed. Thanks anyway

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    Not to my knowledge. SSR or SSG is all at the page level (meaning you have to decide for the whole page). Perhaps in the future? I don't know if anyone even does that sort of thing?

  • @nikkehtine
    @nikkehtine5 ай бұрын

    Nice video

  • @CodinginPublic

    @CodinginPublic

    5 ай бұрын

    Glad you enjoyed it!

  • @javayhu
    @javayhu2 ай бұрын

    Fantastic explanation, thanks a lot. I wondered that if there is a way to implement /posts/[id].astro to support both SSG and SSR? Let's say I have 10,000 blog posts, and we only do SSG if id is

  • @CodinginPublic

    @CodinginPublic

    29 күн бұрын

    Not that I know of currently unless you picked off a few and had their blog layout wrapper set to prerender and the rest not? But they are working on ISR, so that would be the best solution. Hopefully soon!

  • @sistana
    @sistana8 ай бұрын

    Thanks, very helpful, I want to know a litle about islands and midleware in Astro

  • @CodinginPublic

    @CodinginPublic

    8 ай бұрын

    Cool! I'll plan a tut! Thanks for saying something!

  • @onorlidmedina
    @onorlidmedina9 ай бұрын

    Great video, can you make a video about foms with astro? Thank you

  • @CodinginPublic

    @CodinginPublic

    9 ай бұрын

    Glad you liked it! What would you like to know about forms?

  • @ctrlteam5168
    @ctrlteam516810 ай бұрын

    I really like Astro, I have a question. What is Astro's current positioning? Is it SSR service or spa single page application or SSG? Where is the center of gravity of Astro? Thank you.

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    So right now it’s geared towards MPAs. While it defaults to using SSG, you can easily use SSR as I show here. You can create a SPA experience using react or something but at that point it would make more sense to just use Next or something that is react-only. I do have a few Astro sites with an admin section that is completely SPA in that route. I just use react router dom for that section to do all the internal routing. Hope that helps.

  • @eannadefreine6671
    @eannadefreine667110 ай бұрын

    Really interesting video. I wonder what happens when you have a component on every page, a footer for example, that needs to be SSR. Is it still possible to benefit from SSG for the actual route no just SSR the footer?

  • @CodinginPublic

    @CodinginPublic

    10 ай бұрын

    Currently it’s all page level, meaning you have to decide SSR or SSG for an entire page. Perhaps there are plans to change that in the future? I'm not sure if any frameworks are offering that though?

  • @user-bn5eb9um4x
    @user-bn5eb9um4x9 ай бұрын

    Which UI framework deliver the less amount of JavaScript in your experience? I still can't make up my mind whether to use Preact or Svelte. But no Alpine as I didn't want to littering my markup.

  • @CodinginPublic

    @CodinginPublic

    9 ай бұрын

    I don't know that I have a recommendation between those two. I would guess Svelte? But that's merely a guess. I'd think both would be quite quick for most apps though?

  • @user-bn5eb9um4x

    @user-bn5eb9um4x

    9 ай бұрын

    @@CodinginPublicTrue, those are familiar with, I'm just so familiar with vanilla. If only we can solve the last piece of the tetris colors, the "red" UI framework being missing, no Ember or Angular. Maybe Astro should have one for client-side.

  • @richardramirez5746
    @richardramirez5746Ай бұрын

    have you made astro work in old browsers using legacy vite?

  • @CodinginPublic

    @CodinginPublic

    Ай бұрын

    I haven’t! What are your needs?

  • @richardramirez5746

    @richardramirez5746

    Ай бұрын

    @@CodinginPublic When using Astro with vite legacy plugin, legacy scripts are generated in fact, but they do not get injected into page as Vite does when working without Astro. So my concern is having a non-running page in old browsers.

  • @inujung8224
    @inujung82244 ай бұрын

    i think the diagram for const prerender is kinda opposite here? for SSG prerender should be true and SSR it should be false.

  • @CodinginPublic

    @CodinginPublic

    4 ай бұрын

    I don't remember what my diagram mentioned, but prerender only works when you're already in SSR mode (either "server" or "hybrid"). In that case, "server" makes everything NOT prerendered by default and you have to pass prerender = true to change that. "Hybrid" is the opposite. Hope that helps!

  • @TheBuddilla
    @TheBuddilla9 ай бұрын

    My islands will be htmx LOL

Келесі