Skip to content

feat: implement edge-side rendering for SEO-optimized landing page - #2

Merged
palmithor merged 1 commit into
mainfrom
feat/seo-edge-side-rendering
Feb 16, 2026
Merged

feat: implement edge-side rendering for SEO-optimized landing page#2
palmithor merged 1 commit into
mainfrom
feat/seo-edge-side-rendering

Conversation

@palmithor

Copy link
Copy Markdown
Member

Summary

Implements comprehensive SEO using edge-side rendering with Hono while maintaining SPA architecture for authenticated routes.

Changes

New Features

  • Edge-side rendering for landing page (/) with full HTML and meta tags
  • Shared components package (@coding-cowboys/cloudflare-worker-app-components) for server/client compatibility
  • Complete SEO meta tags:
    • Title, description, keywords, author
    • Open Graph (Facebook/LinkedIn sharing)
    • Twitter Cards
    • Canonical URLs
    • JSON-LD structured data (WebApplication schema)
  • Static SEO assets: robots.txt and sitemap.xml

Architecture

  • / - Server-rendered by Hono at the edge (SEO-optimized, indexable)
  • /todos - Client-side SPA (noindex via robots.txt)
  • /api/* - Hono REST endpoints

Technical Implementation

  • Uses react-dom/server renderToString for SSR
  • Shared LandingPage component using React createElement (no JSX for tsgo compatibility)
  • Critical CSS inlined to prevent FOUC
  • Tailwind configured to scan components package for responsive grid classes
  • Wrangler configured to run worker first for root path

Benefits

  1. SEO: Landing page is fully crawlable with rich meta information
  2. Performance: Edge rendering delivers content from closest data center
  3. UX: SPA navigation after initial load for fast app experience
  4. Simplicity: No need for full SSR framework like Next.js

Testing

  • Typecheck passes with tsgo
  • All linting passes with oxlint
  • Browser testing confirms:
    • Responsive 3-column grid layout
    • Gradient background rendering
    • All shadcn/ui styles working
    • SPA navigation functional

Files Changed

  • apps/worker/src/features/seo/seo-route.ts - New SSR route
  • packages/cloudflare-worker-app-components/ - New shared components package
  • apps/web/src/index.css - Tailwind source configuration
  • apps/web/src/ssr-classes.ts - Force-include Tailwind classes
  • apps/web/public/robots.txt - Search engine directives
  • apps/web/public/sitemap.xml - Site structure
  • apps/worker/wrangler.jsonc - Worker-first routing config
  • README.md - SEO documentation added

@palmithor
palmithor force-pushed the feat/seo-edge-side-rendering branch from ba5bca7 to 503675c Compare February 16, 2026 10:47
@github-actions

github-actions Bot commented Feb 16, 2026

Copy link
Copy Markdown

🚀 Preview Environment Deployed

Preview URL: https://cloudflare-worker-app-pr-2.coding-cowboys.workers.dev
Database: cloudflare-worker-app-db-pr-2

This preview environment will be automatically cleaned up when the PR is closed.

@palmithor
palmithor force-pushed the feat/seo-edge-side-rendering branch 5 times, most recently from 16f2ae1 to fc456c4 Compare February 16, 2026 13:10
Add comprehensive SEO implementation with server-side rendering at the edge:

- Create shared components package (@coding-cowboys/cloudflare-worker-app-components)
  with server-safe LandingPage component using React createElement

- Implement SEO route in worker (apps/worker/src/features/seo/seo-route.ts):
  * Server-render landing page using renderToString
  * Full SEO meta tags: title, description, keywords, canonical
  * Open Graph tags for social sharing
  * Twitter Card meta tags
  * JSON-LD structured data (WebApplication schema)
  * Inline critical CSS to prevent FOUC

- Add static SEO assets:
  * robots.txt - controls search engine crawling
  * sitemap.xml - helps search engines discover pages

- Configure wrangler.jsonc to run worker first for root path (/)
  enabling edge-side rendering before static asset serving

- Update Tailwind config to include SSR classes:
  * Add @source directive for components package
  * Create ssr-classes.ts to force-include grid utilities

- Landing page SSR optimized while /todos remains SPA:
  * / - Server-rendered with full SEO (indexable)
  * /todos - Client-side only (noindex via robots.txt)

This hybrid approach gives us:
- SEO: Fully crawlable landing page with rich meta information
- Performance: Edge rendering from closest data center
- UX: SPA navigation after initial load for fast app experience

No need for full SSR framework like Next.js - best of both worlds.
@palmithor
palmithor force-pushed the feat/seo-edge-side-rendering branch from fc456c4 to 6ea3622 Compare February 16, 2026 13:31
@palmithor
palmithor merged commit d71f5af into main Feb 16, 2026
3 checks passed
@palmithor
palmithor deleted the feat/seo-edge-side-rendering branch February 16, 2026 13:40
@github-actions

Copy link
Copy Markdown

🧹 Preview Environment Cleaned Up

The preview environment and database have been deleted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant