Skip to content

dzienisz/chrome-ssr-csr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

115 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CSR vs SSR Detector

Chrome Web Store License: MIT

A Chrome extension that detects whether a webpage uses Server-Side Rendering (SSR) or Client-Side Rendering (CSR). Helps developers and SEO specialists understand page rendering strategies.

Projects

This monorepo contains two projects:

Project Description Links
Chrome Extension Detects SSR/CSR rendering on any webpage Install · Docs
Analytics Dashboard Real-time usage analytics Live · Docs

Quick Start

Install Extension

  1. Visit the Chrome Web Store
  2. Click "Add to Chrome"
  3. Click the extension icon on any webpage to analyze

Development

git clone https://github.com/dzienisz/chrome-ssr-csr.git
cd chrome-ssr-csr

# Extension development
# Load extension/ folder in chrome://extensions (Developer Mode)

# Backend development
cd backend
npm install
npm run dev

Features

  • Accurate Detection - Compares raw HTML vs rendered DOM, plus 15+ indicators
  • Framework Recognition - Detects Next.js, Nuxt, Gatsby, React, Vue, Angular, and more
  • Tech Stack Intelligence - Identifies CSS frameworks (Tailwind, Bootstrap), Build Tools (Vite), and Hosting (Vercel, Netlify)
  • SEO & Accessibility Audit - Checks meta tags, social preview tags, alt text coverage, and ARIA labels
  • Badge on Icon - Shows SSR/CSR/MIX result directly on extension icon
  • Export Results - Download as JSON, CSV, or Markdown
  • Dark Mode - Beautiful dark theme
  • Analytics Dashboard - Aggregated usage data with live updates

SSR vs CSR

SSR (Server-Side) CSR (Client-Side)
Content generated on server Content generated in browser
Better for SEO Better for interactivity
Faster First Paint Smoother navigation
Next.js, Nuxt, Gatsby React SPA, Vue SPA

Contributing

Contributions welcome! See individual project READMEs for details:

License

MIT License - see LICENSE

Links