Evil Martians, the engineering consultancy behind tools like AnyCable and imgproxy, recently shared details of their migration from Gatsby to Astro. The move, completed in just nine days, showcases Astro's ability to integrate seamlessly with existing React ecosystems, even for complex, content-heavy sites.
The team highlighted that they didn't rewrite a single React component, which was the key to their speed. They attributed this to Astro's islands architecture, which allows them to use React components as they are, while the rest of the page is rendered as static HTML. This hybrid approach eliminated the need for heavy client-side JavaScript and dramatically improved performance.
Here’s what the migration involved:
- Seamless React integration: Existing React components were used unchanged, thanks to Astro's built-in support for the React renderer via
@astrojs/react. No refactoring was needed for state management or data fetching. - Replaced Gatsby's GraphQL data layer: While Gatsby relies heavily on GraphQL for data, Astro allows direct imports of local files or fetching from APIs. The team built custom content loaders and used
Astro.globandfetchto replace Gatsby'suseStaticQueryandgraphqlqueries. - Shifted to on-demand rendering: With Gatsby, pages were pre-rendered at build time using a fixed model. Astro introduced server-side rendering (SSR) and static site generation (SSG) as optional, giving the team flexibility to choose per page. This helped with dynamic content and reduced build times.
- CSS and styling preserved: Their existing CSS modules and styled-components worked without changes, as Astro respects the global stylesheet approach. The team moved global styles into
src/styles/global.cssand imported them in layouts. - Improved developer experience: Configuration was simplified;
astro.config.mjsis far less complex thangatsby-config.js. The team also appreciated the clear separation of markdown and code, which made updating content easier. - Performance gains: The site now loads faster due to fewer scripts and static HTML, achieving a Lighthouse performance score of 100.
For developers, this case study is a powerful signal: migrating away from a heavy React-centric framework doesn't mean leaving React behind. Astro lets you keep your component library and investment while reaping the benefits of static output and reduced JavaScript. This can be a game-changer for teams looking to improve Core Web Vitals without a full rewrite, making Astro a viable option for migration projects.