Intro to Astro.js
Astro is a powerful framework for building content-driven multi-page applications that load fast and are great for SEO.
Why is Astro fast?
- It ship’s zero javascript by default!
- It also by default does most of the rendering of your HTML webpages on the server making it so your mobile and laptop devices doesn’t have to process expensive API requests and transform the data on the client!
Why do we need Single Page Apps?
The simple answer is interactivity. Javascript still needs to be used to detect clicks and other events that may cause the UI to change.
But more importantly, when the complexity of your application grows along with the number of interactions from a user, the less you need server side code and the more you need client side javascript.
Yes, this does warrant a Single Page App because there will be a lot of UI changes based off user-interaction — but there is one problem.
Astro doesn’t have a client side router!
What is so bad about this?
Let’s say the user is on Google Search Results page and then clicks on your application.
Let’s say that loads a SPA starting on the /users route with a UserRead component which shows information about the user.
But when the user clicks the edit button, it loads a UserEdit component where the user can edit their information.
Then the user clicks on the back button…
This will cause the user to go back to Google Search Results page.
Something we DON’T want.
We want to go back to the UsersRead component.
The problem here is that we need a client-side router to tell the browser that we are on a new “page”. We can use a client side router to navigate the user to /user/edit route. Now when we click the back button it will go back to the /user route, which is a SUCCESS.
It is possible to use other client-side routers like react-router with Astro to mimick a SPA. Just simply create a backend route let’s say /dashboard that loads all the code necessary for your SPA. And any child routes should be handled on the client.
Best of Both worlds
There is a benefit of using a mix of static site generation, server-side rendering, and client-side rendering for your entire website. Static-site generation (SSG) can used for marketing pages like your landing page or about me page. Server-side rendering can be used for pages that change data frequently, but doesn’t require much interactivity. Finally, CSR rendering can be use for pages that have lot’s of interactivity. By mix and matching these rendering methodologies on the page-level and also on the component level with Astro Islands, you can build a powerful and adaptive website that lives all under one deployment.