Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Astro Beginners Guide, Part 1: Overview

Tags: island astro kblo

Posted on Aug 20 Astro focuses on complete server-side rendering to speed up page loads. Other popular frameworks (NextJS, Remix, Svelte) rely on client side rendering. The trade off is that while server side can be quicker depending on your internet speeds, other errors don't occur as often such as hydration errors. The reason for the speed is that Astro used Multi-page application (MPA) architecture as opposed to the other popular SPA (Single Page Application). The main difference is that MPA and Astro loads HTML pages from the server whereas SPA loads, you guessed it, a single page with JavaScript locally and sorts through the pages as the user navigates.Astro also focuses on content rich websites as opposed to feature rich sites that you can build with the aforementioned frameworks. However, that does not mean that you cannot build in Astro without those as Astro provides support for many of those frameworks out of the box. The Astro framework builds it's web-pages out of islands. You can think of islands like sections on a page or maybe even components for those of you coming from other web dev utilities. These islands can be a mix of interactive and non-interactive and let you easily build out a page. These islands can be built using your favorite UI framework; React, Svelte, Vue, etc. Islands strip out any unused client-side Javascript from the frontend framework to keep your site speedy and responsive.Another great benefit of Astro's Island feature is that you can prioritize each island or component individually with _client _directive. This makes it so that certain islands load based on the priority. Meaning that if you have an island that needs to load first for whatever reason or is heavy on JS, this can structure it so that the higher priority islands load first or that your JS-heavy island can hydrate only when the user sees this part of the webpage.That's all for now. The next article we'll discuss basics of Astro projects.This is part 1 in a multi-part series. Anything to add or corrections? Please let me know.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Dsysd Dev - Jul 26 Rahul Bagal - Aug 12 Ethan - Aug 12 Iuliia Shnai - Aug 16 Once suspended, kblo4517 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, kblo4517 will be able to comment and publish posts again. Once unpublished, all posts by kblo4517 will become hidden and only accessible to themselves. If kblo4517 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Kavon Blossom. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag kblo4517: kblo4517 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging kblo4517 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.



This post first appeared on VedVyas Articles, please read the originial post: here

Share the post

Astro Beginners Guide, Part 1: Overview

×

Subscribe to Vedvyas Articles

Get updates delivered right to your inbox!

Thank you for your subscription

×