How did it all start & Astro at the moment
Astro was a result of a technical experiment where its core team tried to combine multiple frameworks inside one application. So, for example, they wanted to combine React and Vue components together. Guess what? They were successful.
In the beginning, there were just 4 people in Astro’s core team but now there are 12 people already. A fun fact is that the initial commit was done in March 2021 and they already have more than 21000 stars on GitHub. For more information about source code and GitHub repo, visit withastro GitHub repo.
Most of the features and improvements are done by Astro’s community. They have a pretty huge community that is always here to help. Also, bugs and errors are solved pretty quickly in general.
At the moment, Astro aims to be a static site generator. Its aim is to let you build astronomically fast websites. In other words, its goal is to reduce loading time when a user visits your webpage and make it interactive as soon as possible.
Core design principles and features
Astro is mainly content-focused at the moment. What does that actually mean? It means that you should use Astro for content-rich websites such as blogs, simple e-commerce websites, or something like that. That is where Astro shines.
Astro supports SSR (server-side rendering). It does everything it can on the server and serves you already generated content or at least generated parts of the content.
.astro files can fetch remote data at build time. It means that users will see your webpage quicker than fetching on the client.
Fast by default
Easy to use
Probably the best thing about Astro is that you don’t even have to use Astro components. You can write the whole application using technologies that you already know. And that is the biggest Astro advantage. You can use whatever you are comfortable with and let Astro take care of your application under the hood.
On the other hand, if you want to use Astro components, the syntax is pretty similar to modern frameworks. You write basic HTML with kebab-case attributes instead of camelCase which is used inside modern frameworks. HTML comments are valid inside Astro components. You are encouraged to use Typescript (if you want to learn what is Typescript, visit this link). You can type all the styles within the <style> tag and Astro will stick all the styles just to your component and prevent your styles from affecting some other component.
It has lots and lots of integrations that are ready to use. You can use almost all modern frameworks like React, Vue, and others. Before using them, you just need to add them to your application. It is as simple as this one-liner (in this example I want to add React to my application):
npx astro add react
Markdown is supported by default while there is also MDX support.
It also dynamically creates static routes. It means that you name your new page in the pages folder and Astro will create that route for you.
Astro islands (islands architecture)
How does Astro use it?
You can control it using tags on your components. Let’s see a few examples:
<MyComponent client:only /> – only client side rendering
And that is how you can control all behavior of your webpage. Let’s now see how you can start using Astro and make your first project.
How can you start using Astro?
There are some prerequisites that you need to have in order to use it. Firstly, you need to install Node.js v14.18.0, v16.12.0, or higher on your computer. Secondly, you need some text editor like VS code. Finally, you need to know how to use Terminal on your computer.
Installing Astro is pretty simple. All you need to do is to position yourself in some folder where you want to make a new directory for your Astro application and run this command:
npm create astro@latest
When you went through the process of installation, position yourself inside of your application’s folder:
When you are positioned there, you can run your application with this command:
npm run dev
And voila! You are running your first Astro application on localhost. And what now? At the moment your application doesn’t have any functionality except some links to its website, but now you can start building your first Astro application. Let’s see what you can combine there while creating your application.
What technologies does Astro support?
Astro doesn’t want you to learn completely new syntax that takes time to get into. Astro wants you to continue using whatever you are using right now, but let Astro take care of your application under the hood.
So, if you are using React, it’s fine as well as Svelte, Vue, Preact, or something else. If you style your apps using Tailwind CSS it’s fine as well as using Sass or Less. Those choices inside the Astro framework are called integrations and you can see what else Astro supports on this link.
What is next from Astro? Does it have potential?
In the future, Astro’s first goal is to maintain a relationship with its community. It’s a people’s project and it will stay that way. The next goal is to support full SSR (server-side rendering) and compete with Remix or Next.js. The next one is to be as open as possible to continue using mostly open-source technologies.
If we consider everything said here, Astro has a huge potential to become a huge player. At the moment, I can freely say that Astro is the number one option for simple websites and for static site generation. It is stable in production and you can rely on it.
When they incorporate full server-side rendering into the framework, I think there will be no limit for Astro. At that point, it will give you literally an all-in-one experience and everything you need in order to build whatever you want except single-page applications.
Let’s see what the future brings us. 🙂