Hacker News new | ask | show | jobs
by magnio 902 days ago
I like Next.js and have used it for a few projects. However, my previous two blog iterations (yes, I remake my blog as often as writing blog post) with Next.js (page router) were less than ideal.

Even with full static generation, Next.js still makes your site a React application. A page might be pre-rendered completely on the server, but Next will still ship JS to the client for hydrating ... zero dynamic content. Here, speed is not a concern for me (I believe the performance impact (ab)using React for text content is negligible), but the fact that it is just ... not ideal?, irks me so much.

Then I turn to Zola, a more traditional SSG, but then for any interactivity or demo in the posts, I need to add my own vanilla JS, which is a hassle to maintain, and I am not a very good developer. (Though Zola is excellent for completely static sites, much nicer than Hugo IMO.)

I want the site to have zero JS except the sprinkle of React components in the middle of otherwisr semantic DOM nodes for content. The fact that this was seemingly impossible in Next.js is just mind-boggling to me. Then I discovered Astro, which does exactly what I want, no more, no less. Only write markdown? Slap in the official Markdown plugin. Want latex math? Slap in the official remark/rehype plugins and katex stylesheet. Want react components in the middle of the post? Just import it into MDX files. The result? Absolutely no JS if there are no React components, otherwise the only JS shipped is restricted to those components.

(That should have been the logical way to build frontend, and now Next.js is following Remix and Astro with its fine-grained component approach using RSC. Too bad the last time I tried the app router, all markdown plugins broke, while Astro is building my site beautifully.)

2 comments

If you disable JavaScript in your browser and load my blog, you'll find the entire site works apart from the interactive components in the article! That's the only part that uses client-side JS.
How much JS is being shipped in that case though, and if it’s loaded async and not being used would it ever even impact page paint time?