Do You Really Need React for Your Landing Page?
I recently worked on a landing page project with deceptively simple requirements: display business information and contact details.
From a technical perspective, the primary goal was SEO optimization—the client wanted organic growth through search engine visibility.
This seemingly straightforward requirement led me down a rabbit hole of technology choices, trade-offs, and ultimately, a return to simplicity.
The Requirements
- Business information display
- Contact information
- SEO-optimized (server-side rendered or statically generated)
- SPA-like experience (design requirement agreed upon in the design document)
The Wrong Tools for the Job
WordPress: Feature Bloat
My first instinct was WordPress.
It’s ubiquitous, has a massive plugin ecosystem, and promises rapid development.
But as I thought deeper, the cracks appeared:
Unnecessary features: User login system, CMS, database connections—none of which the client asked for.
Infrastructure overhead: Requires a PHP server running 24/7.
Cost: Even cheap VPS hosting is ongoing overhead for purely static content.
WordPress is a powerful CMS, but for a single landing page with static content, it’s like using a sledgehammer to hang a picture.
React/Vue/Angular: SEO Nightmare
Client-side frameworks like React and Vue were immediately problematic for this use case:
SEO challenges: Search engines struggle with JavaScript-heavy SPAs.
While Google has improved, many crawlers won’t execute JavaScript to render your content.
Bundle bloat: Shipping a JavaScript runtime just to display text and images.
Hydration overhead: Users see a blank page until JavaScript loads.
For a content-first landing page where SEO is critical, client-side rendering is the wrong architectural choice.
The Sweet Spot: Static Files with Progressive Enhancement
This led me to a question:
Can we build a site that’s fully static HTML files, yet delivers a decent SPA-like experience?
Enter HTMX
HTMX became the missing piece.
It allows you to:
- Swap out page sections dynamically
- Maintain SPA-like navigation without a JavaScript framework
- Keep everything as plain HTML files
<!-- Instead of React Router, you get this -->
<a hx-get="/about" hx-target="#content" hx-push-url="true">
About Us
</a>
<div id="content">
<!-- Content swaps here -->
</div>No backend required.
No JavaScript bundle.
Just a 10KB library.
The Stack
I settled on:
- Nunjucks: Templating engine for layouts and reusable components
- Tailwind CSS: Utility-first styling with design system consistency
- HTMX: Progressive enhancement for SPA-like navigation
- Netlify: Static hosting with CDN, DNS management, and easy analytics injection
Why This Worked
1. SEO-First Architecture
Static HTML means search engines see your content immediately.
No JavaScript execution required.
Keywords, meta tags, and structured data are all present in the initial HTML payload.
2. Modular Design Without Complexity
Nunjucks allowed me to break pages into reusable components without the overhead of a JavaScript framework:
<!-- layouts/base.njk -->
<!DOCTYPE html>
<html>
<head>{% block head %}{% endblock %}</head>
<body>
{% include "components/nav.njk" %}
{% block content %}{% endblock %}
{% include "components/footer.njk" %}
</body>
</html>No copy-pasting across multiple HTML files.
No build step complexity.
3. SPA-Like Experience
HTMX’s hx-boost attribute progressively enhances regular links:
<body hx-boost="true">
<!-- All internal links now load via AJAX -->
</body>Users get smooth page transitions.
The URL updates.
Browser history works.
But underneath, it’s just fetching HTML fragments.
4. Deployment Simplicity
No server maintenance: Static files on Netlify’s CDN
Zero hosting costs: Netlify’s free tier handles most landing pages
Global CDN: Automatic edge distribution
Easy analytics: Simple script injection for Google Analytics
Form handling: For simple contact forms, services like Formspree handle submissions without needing a backend. The form POSTs to their endpoint, and they email you the results. No server required.
Real-World Example
This approach isn’t just theoretical.
I built a landing page for Chim Hong KL using exactly this stack—Nunjucks for templating, Tailwind CSS for styling, HTMX for SPA-like navigation, and Netlify for hosting.
The result? A fast, SEO-friendly site with smooth page transitions that costs nothing to host and requires zero maintenance.
The Trade-offs
This approach isn’t a silver bullet.
Consider when not to use it:
When to Use React/Vue/Angular
- Complex dashboards with real-time data
- Heavy state management requirements
- Rich interactive applications (Figma-like tools, video editors)
- When your team has deep framework expertise
When to Use Next.js/Nuxt.js/PHP
- Content-heavy sites with dynamic data (blogs, news sites)
- E-commerce with user accounts and carts
- When you need server-side processing
- Large teams requiring established patterns
When to Use WordPress
- Client needs a CMS to update content themselves
- Rapid prototyping with existing themes
- Non-technical users managing the site
Lessons Learned
1. Start Simple
For this project, even pure HTML would have worked.
The key insight: add complexity only when necessary, not by default.
2. SPA Isn’t Always Better
We often default to SPA architecture because it’s “modern,” but:
- SPAs hurt SEO (content hidden behind JavaScript)
- SPAs increase bundle sizes
- SPAs complicate analytics and tracking
Ask yourself: Does my app need to be a SPA, or am I just following trends?
3. Understand Your Stack’s Strengths
Every technology choice has trade-offs:
| Approach | SEO | Complexity | Hosting Cost | Best For |
|---|---|---|---|---|
| Pure HTML | ⭐⭐⭐ | Low | Free | Ultra-simple sites |
| HTMX + Static | ⭐⭐⭐ | Low | Free | Landing pages, content sites |
| Next.js/Nuxt.js | ⭐⭐⭐ | Medium | Low-Medium | Dynamic content, e-commerce |
| WordPress | ⭐⭐ | High | Medium | Client-managed content |
| React SPA | ⭐ | High | Low | Interactive applications |
Conclusion
This project reminded me that we often over-engineer simple solutions.
The web platform has evolved tremendously—HTML, CSS, and a sprinkle of JavaScript can accomplish more than we give them credit for.
For content-first applications, prioritize:
- Static generation for SEO
- Progressive enhancement for UX
- Simplicity for maintainability
The next time you start a new project, pause and ask:
Do I really need all these features?
The best technology is often the one that gets out of your way.
Have you simplified a project’s tech stack? I’d love to hear about your experiences.