Converting to Astro from Next.js

‍
If you are big into the React community you might know about the Next.js framework to build websites static and server side apps.

It provides a lot of benefits like turning a javascript react client side application that requires the user to build the html/content on the client at the server level.

You can think of it as code is shipped and ready to go without having the user have to execute client-side code to build the structure of the data or html.

‍

From files pre-created HTML, CSS, Javascript, and other files move to a web server that can fulfill request to browser. — Example of how code is transferred to a server so that it can move the files required to the browser. ( Picture MDN )

‍

First glance another framework?

Initially looking into the project after cycling through the javascript world with tools that live for the moment. Astro seemed like it was very aligned with some of the concepts that

Next.js provides like static site generating (SSG) which is a huge win allowing for improved SEO and more. The idea that brought in the difference was this was not like Next.js

since Astro does not care about the language that you use and is more of a tool that is going to build all the html that can be built on the server during the build step and eliminating any unused javascript on the html that was executed on the server.

Doesn't Next.js do this too?

Well yes and no, Next.js handles this at the cost of extra javascript and bundles that execute on the page that hydrate the content from the server to allow it to still be interactive with client side required javascript (like animations and events). The page is shipped with extra code that allows for this regardless if the page has interactivity making the payload larger. With Astro the html is shipped with just the javascript that would make the page interactive and the code to launch the app, including not being tied to a set library or language. On a basic SPA website it takes about 704ms for Next.js to load while Astro takes 107ms.
‍

Nextjs takes 16 request and loads a basic website at 704ms while Astro performs 7 request and takes 107ms. — Side by side example with Next.js on the left and Astro on the right.

‍

Jeff Mendez personal website with 3 navigation items, a picture of Jeff Mendez fishing, and introduction. Hi, my name is Jeff Mendez and I am software engineer and Founder of A11yWatch a web accessibility improvement suite. Checkout A11yWatch to improve your web inclusion. Use the website accessibility checker for free. Github link to personal code. — Example of website tested.

‍

Into the future!

We are very excited for Astro and looking forward to moving some of our content over. Stay tuned as we post more content about the new tool that can help developers keep their productivity and also ship small bundles. A migration of the example can be found here to give an idea on the effort it would take to move a simple page. It took around 20 mins from initially reading the docs to moving the entire application over. The website of the Next.js to Astro conversion can be pulled from to use providing a typescript setup.