Hello World: Starting Over with Astro

Why Rebuild?

Writing a blog with Next.js felt like delivering takeout in a truck—it works, but the overall architecture is too heavy.

• Scalability: The old blog was based on tailwind-nextjs-starter-blog. It had a complex dependency chain, including several highly coupled “black box” MDX processing libraries, making it extremely difficult to customize and extend.
• Stability: Individual dependency libraries experienced drastic changes, leading to poor stability. Moreover, Next.js updates were frequent and major version changes were significant, resulting in high maintenance costs.
• Performance: The hydration cost of Next.js is quite expensive for a blog primarily focused on static content, impacting overall performance.

Why Choose Astro?

Astro’s design philosophy aligns perfectly with the requirements of a blog:

• Zero JS by Default: No JavaScript is shipped to the client by default, providing an incredibly high performance ceiling.
• Content Collections: Built-in Content Collections offer type-safe Markdown/MDX management without needing third-party black boxes.
• Islands Architecture: Hydrate components only when needed, rather than taking an all-or-nothing approach.
• View Transitions API: Native support for page transition animations, ensuring a smooth user experience.

More Elegant Content Collections

Astro’s Content Collections allow defining frontmatter types using Zod Schema. Errors are caught during build time, so there’s no need to worry about missing fields like description causing empty OG cards.

The Restraint of Islands Architecture

For my blog, over 90% of the pages don’t require client-side JS. Astro ships zero JS by default, and interactive components can be individually marked as islands for on-demand activation.

Goals for This Reconstruction

1. Completely remove black-box dependencies and implement core functions using Astro’s native capabilities.
2. Introduce micro-interactions and animations, upgrading from a minimalist style to a simple yet elegant one.
3. Maximize performance and SEO, aiming for Lighthouse scores as close to four 100s as possible.
4. Support bilingual content (Chinese and English), resolving the issue of fragmented content in the past.
5. Deploy on a CDN that is more friendly to access from mainland China.

About Performance

Astro’s SSG output is pure HTML + CSS, with no React runtime or hydration overhead. With proper image optimization and font subsetting, Lighthouse Performance can get very close to a perfect 100.

Summary

This is the first post after the blog reconstruction, marking a new beginning. I will continue to document technical choices, challenges, and reflections during the reconstruction process.