How the Surg IT Website Was Created

In a world of constant improvement and progression, we at Surg IT set out to make significant changes to our website. Our goal was clear: move away from WordPress and build a platform that serves as a robust foundation, allowing us to add innovative features and systems for our clients in the future. With this vision in mind, we began exploring our options.

The Problem with WordPress

WordPress is an excellent choice for businesses seeking a straightforward landing page to share services, contact information, and perhaps a few blog posts. It excels in simplicity and accessibility, offering a wealth of plugins to enhance functionality. When implemented well, WordPress sites can be fast, efficient, and easy to maintain.

However, WordPress begins to fall short when more complex systems are required, such as login portals, client-specific dashboards, ticketing systems, or custom workflows. While plugins exist to address these needs, they often come with limitations:

• Customization Challenges: Plugins are designed for broad use cases, which can make tailoring them to specific business needs cumbersome or even impossible.
• Performance Degradation: Relying on multiple plugins introduces overhead, impacting the website’s speed and responsiveness.
• Security Risks: Plugins may create vulnerabilities, especially if they’re outdated or poorly maintained.
• Scalability Issues: WordPress sites often struggle to adapt to rapid growth or the addition of new, complex features.

For these reasons, we realized that WordPress was not the ideal solution for Surg IT as we looked to the future of our digital presence.

Why Not Use Next.js?

Next.js is an outstanding framework developed by Vercel, providing the tools to create dynamic web applications with immense flexibility and complexity. It offers server-side rendering (SSR), static site generation (SSG), and the ability to handle intricate use cases seamlessly. However, for our needs, Next.js felt like an overpowered solution.

Building a static website with additional features using Next.js can lead to unnecessary complexity in the development process. Managing configurations, deploying updates, and ensuring optimal performance for simpler requirements might involve more effort than necessary. In essence, while Next.js is powerful, it’s akin to using a high-performance sports car to drive around the block—excellent but not always practical for smaller-scale needs.

What Did We Choose?

After evaluating our options, we decided to build our new website using Astro. Astro strikes the perfect balance between serving static websites efficiently while also enabling dynamic functionality with server-side JavaScript components through its innovative “Server Islands” approach.

Why Astro?

Astro allowed us to:

1. Optimize Performance: The homepage, which receives the most traffic, is served as a static site, ensuring lightning-fast load times.
2. Enable Dynamic Features: The Portfolio section is server-side rendered (SSR), providing a seamless and dynamic experience for users. This approach also simplifies future updates—new portfolio items can be added without downtime.
3. Enhance Flexibility: Astro’s modular approach lets us choose which components are server-side or client-side, allowing precise control over performance and interactivity.
4. Future-Proof Our Platform: Astro’s versatility means we can gradually introduce new features without needing a complete overhaul.

Benefits of Server Islands

The Server Islands architecture means only essential JavaScript is sent to the client, reducing unnecessary processing and enhancing performance. This selective hydration ensures that static elements remain lightweight, while dynamic elements, such as animations or real-time data fetching, are processed server-side. This combination provides the best of both worlds: visually engaging features without sacrificing speed or responsiveness.

What Is the Performance?

Our website’s Google Lighthouse scores speak for themselves:

• Performance: 98
• SEO: 92

Switching to Astro immediately resulted in a significant performance boost. The only reason we didn’t achieve a perfect score of 100 was due to intentional design choices that prioritize aesthetics and animations, which can slightly impact performance and SEO metrics.

How Server Islands Enhance Performance

By processing dynamic content server-side and serving static content directly, the overall page load time is minimized. For example, our Portfolio section’s server-side rendering ensures that animations and data updates are pre-processed before reaching the user, leading to smoother interactions and a better user experience.

What Is the Tech Stack?

To build the Surg IT website, we used the following technologies:

• Astro: The backbone of our website, combining static and dynamic capabilities seamlessly.
• TypeScript: Ensuring type safety and maintainable code.
• TailwindCSS: For efficient and responsive styling.
• React: Powering interactive components where needed.
• ShadCN UI: Providing a consistent and customizable design system.
• Framer Motion: Bringing animations to life with smooth transitions and effects.

Conclusion

At Surg IT, continuous improvement is a core value. Our transition to a new platform and framework not only enables us to learn and grow but also positions us to deliver innovative features for our clients. This new website is more than a digital presence; it’s a springboard for exciting opportunities to provide value, all in one cohesive space. We’re excited about what’s next and look forward to sharing it with you.