{"id":59174,"date":"2022-10-20T23:08:15","date_gmt":"2022-10-20T15:08:15","guid":{"rendered":"https:\/\/version-2.com\/?p=59174"},"modified":"2023-02-22T14:31:44","modified_gmt":"2023-02-22T06:31:44","slug":"why-we-chose-astro-for-our-marketing-websites","status":"publish","type":"post","link":"https:\/\/version-2.com\/zh\/2022\/10\/why-we-chose-astro-for-our-marketing-websites\/","title":{"rendered":"Why we chose Astro for our marketing websites"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n
\n
\n
\n
\n
\n
When you build a website, it\u2019s essential that you\u2019re using the right tools. With countless UI libraries, bundlers, and frameworks available, engineers have never had so many tools at their disposal. But which ones are right for large, traffic-heavy marketing websites? We chose Astro. Here\u2019s why.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\n
\n
\"\"<\/div>\n\"Blog\n\n<\/div>\n

<\/p>\n\n<\/div>\n

\n
\n

Problems with our existing stack<\/b><\/h2>\n

My team at Nord Security is responsible for building and maintaining websites for the fastest VPN in the world, NordVPN<\/a>. We have multiple marketing sites built by different people at different times. Some were made with Gatsby, and others with WordPress and a home-grown React-based SSG (static-site generator).<\/p>\n

Those websites served us well. However, rapid scaling has caused issues with website performance, which has a direct impact on sales and marketing. It\u2019s a proven fact that a reduction in website performance (for example, slower load times) decreases sales. This has been demonstrated in studies from WPO Stats<\/a>.<\/p>\n

As the business scaled, my team had the challenging task of researching and proposing a tech stack to rebuild our websites and achieve optimal marketing potential.<\/p>\n\n

A challenge<\/b><\/h2>\n

There was a lot of work to be done. We had more than 20 locales, 10 currencies, and thousands of pages. Personalization had to be considered, and A\/B testing implemented. Supporting an ever-expanding list of requirements while still achieving optimal performance felt like an impossible goal.<\/p>\n

We tried different frameworks \u2014 Next.js, Preact, SvelteKit, and Elder.js \u2014 and even tried building server-side rendering and island architecture with Svelte. We had to find the best systems to satisfy the needs of content editors, data analysts, and engineers.<\/p>\n

Of course, it\u2019s not every day that a team gets a chance to rebuild their websites from scratch. We knew we could create something great, so we wanted to make the most of this opportunity.<\/p>\n\n

Enter: Astro<\/b><\/h2>\n

As our research continued, it became clear that Astro<\/a>, an all-in-one web framework, ticked all our boxes. We had initially ruled out Astro because it didn\u2019t offer server-side rendering, but when this feature was added in 2022, we knew that we\u2019d found our framework.<\/p>\n

Astro is not a mainstream framework, of course, and when we were considering it, the framework was still in beta. Going down this route was a risk, but it was one we were willing to take. Why? Because not only did it fulfill almost all of our requirements, but it already had a vibrant and active community and a responsive developer team. New features are planned, implemented, and delivered several times a week.<\/p>\n

Along with server-side rendering, Astro\u2019s developers had added Node.js support and edge deployment. These factors facilitate streamlined continuous deployment and enhance the power of a globally deployed content delivery network, allowing for unmatched performance. Edge deployment with Cloudflare, Vercel, and Netlify involves only a few simple steps, but the impact is huge.<\/p>\n

With just a few lines of code, we now had server-side rendering enabled on our desired deployment server:<\/p>\n\n

\n
\n
\n
\n\n1<\/span>\n
export<\/span> default<\/span> defineConfig<\/span>(<\/span>{<\/span><\/div>\n<\/div>\n
\n\n2<\/span>\n
output<\/span>:<\/span> \u2018server\u2019<\/span>,<\/span><\/div>\n<\/div>\n
\n\n3<\/span>\n
adapter<\/span>:<\/span> node<\/span>(<\/span>)<\/span>,<\/span> \/\/ cloudflare(), vercel() …<\/span><\/div>\n<\/div>\n
\n\n4<\/span>\n
}<\/span>)<\/span>;<\/span><\/div>\n<\/div>\n
<\/pre>\n<\/div>\n<\/div>\n