Skip to content

Why we chose Astro for our marketing websites

When you build a website, it’s essential that you’re 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’s why.
Blog image 2022 10 20

Problems with our existing stack

My team at Nord Security is responsible for building and maintaining websites for the fastest VPN in the world, NordVPN. 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).

Those websites served us well. However, rapid scaling has caused issues with website performance, which has a direct impact on sales and marketing. It’s 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.

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.

A challenge

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.

We tried different frameworks — Next.js, Preact, SvelteKit, and Elder.js — 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.

Of course, it’s 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.

Enter: Astro

As our research continued, it became clear that Astro, an all-in-one web framework, ticked all our boxes. We had initially ruled out Astro because it didn’t offer server-side rendering, but when this feature was added in 2022, we knew that we’d found our framework.

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.

Along with server-side rendering, Astro’s 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.

With just a few lines of code, we now had server-side rendering enabled on our desired deployment server:

1
export default defineConfig({
2
output: ‘server’,
3
adapter: node(), // cloudflare(), vercel() …
4
});

Benefits of Astro

During the research phase, we noted that Svelte syntax, being a superset of HTML, was much easier to work with than React syntax. The same went for Astro. We have hundreds of different components to implement, most of which require little to no JavaScript, so being able to convert them to the HTML-style syntax of Astro made those components more readable.

The complex components that required client-side JavaScript and reactivity were another story. Our main requirement of reaching optimal website performance pushed us to try something new: SolidJS.

SolidJS is performant-reactive and simple for building user interfaces. It uses JSX syntax, works well for server-side rendering, and offers outstanding performance. It does all this with a fraction of the size of other libraries that usually come shipped with a browser.

Furthermore, both Astro and SolidJS share the concept of so-called vanishing components. Components exist to organize your code and not much else. What is shipped to the client is pure HTML and CSS.

Client-side JavaScript is an opt-in feature in Astro. Unless you specifically use one of the client directives, the component is shipped with 0kb of JavaScript. Of course, you also have the option to bundle global or local scripts straight from the component code.

SolidJS and other framework components are inserted into Astro files using the “islands architecture” pattern. The pattern was proposed by Katie Sylor-Miller in 2019 and is expanded in this post by Preact creator Jason Miller.

Here are the possible client directives for making “islands” interactive:

  • client:load — Loads JavaScript and hydrates the component on page load.

  • client:idle — Loads JavaScript and hydrates the component after page load once the main thread is idle.

  • client:visible — Embraces the power of Intersection Observer API and loads JavaScript only if the component becomes visible.

  • client:media — Useful in cases where certain components should be visible and interactive only on certain screen sizes.

  • client:only — Skips server-side rendering and runs the code on the client. Be careful with this one because it can push down your SEO scores.

Some parts of the page can be fully static, without any JavaScript needed, while other parts, or islands, may require JavaScript. The process of resolving the component state is called hydration.

Though the JavaScript community is still split over whether hydration is the right approach compared to resumability, it solves our current problems nicely. More information about the hydration topic can be found in this great article.

With Astro, islands come with another benefit: various component framework support. It offers flexibility when choosing a UI framework and has integrations to work with React, Svelte, SolidJS, and Vue. Of course, you won’t typically mix those, but it gives you flexibility and room to maneuver.

The results

To see how well it worked, check out the Lighthouse scores for one of our new websites:

Blog image today 1

The other projects integrated well with our Cloudflare Pages, and more will be built soon!

The pace of releases, weekly community calls, RFCs, the involvement of the core team, and its vibrant community all serve to confirm that we made the right choice with Astro.

About Version 2 Digital

Version 2 Digital is one of the most dynamic IT companies in Asia. The company distributes a wide range of IT products across various areas including cyber security, cloud, data protection, end points, infrastructures, system monitoring, storage, networking, business productivity and communication products.

Through an extensive network of channels, point of sales, resellers, and partnership companies, Version 2 offers quality products and services which are highly acclaimed in the market. Its customers cover a wide spectrum which include Global 1000 enterprises, regional listed companies, different vertical industries, public utilities, Government, a vast number of successful SMEs, and consumers in various Asian cities.

About Nord Security
The web has become a chaotic space where safety and trust have been compromised by cybercrime and data protection issues. Therefore, our team has a global mission to shape a more trusted and peaceful online future for people everywhere.

Is Federal Data Protection Legislation Coming Soon?

Could federal data protection legislation similar to GDPR in Europe be coming to the US? It looks possible.

The American Data Privacy and Protection Act (ADPPA) emerged from the House Energy and Commerce Committee (by 53-2 vote), and versions of the bill are now working through both houses of Congress. Some obstacles stand in the way (more on that later). But this is the most significant piece of federal data protection legislation since 1974, many think it’s already overdue, and there’s clear momentum, not to mention bipartisan support. So it’s probably a matter of when and how more than if.

Let’s take a closer look at a bill that could change the digital landscape as we know it – with implications for every individual and company in America.

What Does ADPPA Do?

Fundamentally, ADPPA does two things. First, update existing data privacy and protection laws (which are quite weak), for a world awash with digital data. These laws have long lagged behind the realities of collecting, storing, and leveraging data on a massive scale. And with the passage of GDPR followed by similar legislation elsewhere, the US approach to data protection looks like an anachronism and a liability. ADPPA updates the law to the 21st century.

The second thing it does is create federal standards for data protection and privacy. Some states currently mandate data protection, but ADPPA would fill in the gaps for the states that don’t and set minimum standards for all states to follow. How state and federal laws will work together is a point of contention, as we shall see, but federal standards are nonetheless important for making data protection a national priority. ADPPA establishes those standards.

It’s a big bill, as one would expect, but the biggest changes pertain to how companies disclose their data collection practices. Instead of asking for lump permissions (eg. “accept all cookies), companies will have to disclose what type of monitoring they want to conduct and ask for individual permissions. This will make it more transparent what data companies are collecting and give individuals greater control over what companies can and can’t collect. Individuals will also have the right to access data collected over the last 24 months, the right to correct, delete, or transfer (where feasible) any data, and the right to opt-out of targeted advertising and data sharing with third parties.

The Federal Trade Commission (FTC) will enforce ADPPA violations through civil actions, but states attorney general may do the same, and individuals can also file suit. This bill, if it passes, makes data protection a requirement for every company in America. That means cyber attacks, which are already costly in more ways than one, are about to come with much larger legal consequences. ADPPA hasn’t passed yet – but everyone needs to be prepared for if and when it does.

Who Does ADPPA Apply to?

The short answer is everyone – that’s the point of federal legislation. But the law draws some distinctions that are important to highlight. Rules would apply to all data collectors (most companies) and data processors (companies that move data). Smaller companies would be exempt from certain provisions. Meanwhile, the largest data collectors (like Meta and YouTube) would face additional requirements in other cases.

Some critics have called for stricter requirements on the largest companies, noting that the ADPPA gives them broad latitude to collect and use data provided they don’t share it with third parties. Others have pointed out that data risks are the same at large and small companies, so ADPPA should forego size distinctions altogether. Who knows if or how these criticisms will affect the final form of the bill? The regulatory burden could be less or greater than we expect.

Still, no matter what the final form of the bill looks like, it will drastically raise data protection standards from where they are now and force action on the part of any company planning to keep collecting data. Unfortunately, so much about the timing and details remains up in the air.

What’s Standing in the Way of ADPPA?

The biggest obstacle is the California Consumer Privacy Act (CCPA), currently the most stringent data protection standard at the state level, and more demanding overall than what ADPPA requires. In its present form, ADPPA would supersede the California requirements, effectively lowering the bar and undercutting the (important and often impressive) working being done there.

The solution seems simple enough: change the language of the bill to make the ADPPA the minimum required standards, then let states erect stricter standards on top. But state’s rights issues inspire strange turf wars. And, as a result, the ADPPA is somewhat stuck in limbo. Some resolution is coming – even the most ardent critics of the bill acknowledge that it’s time for federal standards. But when it will arrive and what provisions look like is a guessing game.

I’m personally feeling optimistic about ADPPA passing before the mid-term elections. And even if it doesn’t, the fact that this bill enjoys such rare bipartisan support suggests that no change in the congressional makeup would prevent its passage – but perhaps I’m expecting too much from a governing body mostly known for gridlock.

#ADPPA #GDPR #Congress #DataProtection #DataPrivacy #Legislation

About Version 2 Digital

Version 2 Digital is one of the most dynamic IT companies in Asia. The company distributes a wide range of IT products across various areas including cyber security, cloud, data protection, end points, infrastructures, system monitoring, storage, networking, business productivity and communication products.

Through an extensive network of channels, point of sales, resellers, and partnership companies, Version 2 offers quality products and services which are highly acclaimed in the market. Its customers cover a wide spectrum which include Global 1000 enterprises, regional listed companies, different vertical industries, public utilities, Government, a vast number of successful SMEs, and consumers in various Asian cities.

About VRX
VRX is a consolidated vulnerability management platform that protects assets in real time. Its rich, integrated features efficiently pinpoint and remediate the largest risks to your cyber infrastructure. Resolve the most pressing threats with efficient automation features and precise contextual analysis.

Critical Infrastructure Alert: Isolate Your ICS

CISA has been taking their Industrial Control System security priority seriously with over 30 advisories released in the last couple months.

The most recent advisories cover Advantech R-SeeNet, a router monitoring application used; and Hitachi Energy APM Edge, an asset performance tracker specifically for power transformers.

These advisories cover a number of CVEs for each application and, in the case of R-SeeNet, involve the usual scumbag known as remote code execution.

ICSA-22-291-01 – R-SeeNet (Advantech)

Affected Critical Infrastructure Sectors: Critical Manufacturing, Energy, Water and Wastewater Systems

Reported by rgod, working with Trend Micro Zero Day Initiative.

Vulnerabilities:

CVE-2022-3387: “Path traversal attack. An unauthorized attacker could remotely exploit vulnerable PHP code to delete .PDF files.”

CVSS v3 score: 6.5

CVE-2022-3386: “Stack-based buffer overflow. An unauthorized attacker can use an outsized filename to overflow the stack buffer and enable remote code execution.”

CVSS v3 score: 9.8

CVE-2022-3385: “Stack-based buffer overflow. An unauthorized attacker can remotely overflow the stack buffer and enable remote code execution.”

CVSS v3 score: 9.8

Mitigation: Update R-SeeNet to Version 2.4.12 or later.

CISA also recommends minimizing network exposure for all control systems and isolating them from the Internet.

ICSA-21-336-06 – APM Edge (Hitachi Energy)

Affected Critical Infrastructure Sectors: Energy

Reported by Hitachi Energy

Vulnerabilities:

Reliance on Uncontrolled Component (CWE-1357): Because APM Edge uses a number of open-source software components, a successful exploitation could cause the product to become inaccessible.

29 total vulnerabilities are involved in this advisory, with the worst case given a CVSS v3 score of 8.2.

Mitigation: update APM Edge to v4.0.

Hitachi also recommends certain security practices and firewall configurations that can be found on the CISA advisory page (linked above) and Hitachi’s advisory that can be downloaded as a PDF from CISA’s advisory page as well.

Image by American Public Power Association

#CISA #Advisory #Industrial_Control_Systems

About Version 2 Digital

Version 2 Digital is one of the most dynamic IT companies in Asia. The company distributes a wide range of IT products across various areas including cyber security, cloud, data protection, end points, infrastructures, system monitoring, storage, networking, business productivity and communication products.

Through an extensive network of channels, point of sales, resellers, and partnership companies, Version 2 offers quality products and services which are highly acclaimed in the market. Its customers cover a wide spectrum which include Global 1000 enterprises, regional listed companies, different vertical industries, public utilities, Government, a vast number of successful SMEs, and consumers in various Asian cities.

About VRX
VRX is a consolidated vulnerability management platform that protects assets in real time. Its rich, integrated features efficiently pinpoint and remediate the largest risks to your cyber infrastructure. Resolve the most pressing threats with efficient automation features and precise contextual analysis.

×

Hello!

Click one of our contacts below to chat on WhatsApp

×