recharts · ckifer · Oct 23, 2025 · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
@@ -0,0 +1,56 @@
+name: Deploy website to recharts.github.io/recharts/
+
+# This deployment and the ci.yml are going to overwrite each other
+# so this is only good as a staging environment for manual testing.
+
+on:
+  # this workflow runs only manually
+  workflow_dispatch:
+
+env:
+  NODE_VERSION: 20.x
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# This job will build and deploy the website to GitHub Pages (staging)
+# It will override the VR report from ci.yml which is okay - staging is temporary
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Recharts Repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+          cache-dependency-path: 'package-lock.json'
+
+      - name: Install dependencies
+        working-directory: www
+        run: npm ci
+
+      - name: Build
+        working-directory: www
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'www/docs'
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml
@@ -1,4 +1,4 @@
-name: Deploy Website
+name: Deploy website to recharts.github.io
 
 on:
   # this workflow runs manually

diff --git a/www/SSG_README.md b/www/SSG_README.md
@@ -0,0 +1,91 @@
+# Static Site Generation (SSG) for Recharts Website
+
+## Overview
+
+This website now uses Static Site Generation (SSG) to pre-render all routes at build time. This solves the SEO issue where Google's searchbot was seeing 404 status codes from the SPA hack and refusing to index pages.
+
+## How It Works
+
+1. **Client Build**: Vite builds the client-side application as usual
+2. **Sitemap Generation**: Vite plugin generates sitemap.xml with all routes
+3. **SSR Build**: A separate SSR bundle is created from `src/entry-server.tsx`
+4. **Pre-rendering**: The SSR bundle renders each route to HTML and saves it to the appropriate path
+5. **Sitemap Validation**: Validates that all sitemap URLs have corresponding HTML files
+6. **Hydration**: When users visit the site, React hydrates the pre-rendered HTML
+
+## Files Added/Modified
+
+### New Files
+- `src/entry-server.tsx` - SSR entry point that exports `render()` and `getAllRoutes()`
+- `scripts/prerender.tsx` - Script that orchestrates the pre-rendering process
+- `scripts/validate-sitemap.tsx` - Validates sitemap consistency with rendered HTML files
+- `scripts/vite-plugin-prerender.ts` - (Optional, not currently used) Vite plugin approach
+- `src/views/ExamplesIndexView.tsx` - Landing page for examples with category grid
+- `src/views/ExamplesIndexView.scss` - Styling for examples index page
+
+### Modified Files
+- `src/app.tsx` - Changed from `createRoot().render()` to `hydrateRoot()` for proper hydration
+- `package.json` - Added `prerender` and `validate-sitemap` scripts, updated `build` to run both
+- `vite.config.ts` - Removed `defaultLanguage` from sitemap config to generate explicit locale URLs
+- `src/routes/index.tsx` - Removed redirects, added examples index page route
+
+## Build Process
+
+```bash
+npm run build
+```
+
+This runs:
+1. `npm run build:client` - Builds the client application to `/docs` and generates sitemap.xml
+2. `npm run prerender` - Pre-renders all 378 routes
+3. `npm run validate-sitemap` - Validates sitemap against generated HTML files
+
+## Pre-rendered Routes
+
+The solution pre-renders:
+- Root route (`/`)
+- All locale-specific routes (`/en-US`, `/zh-CN`)
+- Examples index pages (`/examples`, `/en-US/examples`, `/zh-CN/examples`)
+- All guide pages
+- All API documentation pages  
+- All example pages
+- Storybook pages
+
+Total: **378 routes** across 2 locales (en-US, zh-CN) plus default unprefixed routes
+
+## Benefits
+
+✅ **SEO-Friendly**: Each route has a proper HTML file with content, no 404 status
+✅ **Fast First Paint**: Users see content immediately without waiting for JS
+✅ **GitHub Pages Compatible**: Works perfectly with static hosting
+✅ **No Server Required**: Still a static site, no Node.js server needed
+✅ **Progressive Enhancement**: Works even if JavaScript fails to load
+✅ **Sitemap Validation**: Automated checks ensure sitemap and HTML files stay in sync
+✅ **Proper Examples Landing**: Examples index shows categorized preview cards instead of redirects
+
+## Technical Details
+
+- Uses React 18's `renderToString` for SSR
+- Uses `StaticRouter` from react-router for server-side routing
+- Uses `hydrateRoot` for client-side hydration
+- Bundles all dependencies in SSR build (`noExternal: true`)
+- Cleans up temporary SSR build after pre-rendering
+
+## Development
+
+During development, the site works as a normal SPA (no pre-rendering). Pre-rendering only happens during production builds.
+
+```bash
+npm start  # Development mode - no pre-rendering
+npm run build  # Production build - with pre-rendering
+```
+
+## Notes
+
+- The old SPA GitHub Pages hack has been **removed** - no longer needed!
+- The `404.html` is now a proper, clean 404 page (not a redirect hack)
+- Build time increases slightly due to pre-rendering, but it's a one-time cost at build time
+- Sitemap validation runs automatically after builds to catch inconsistencies
+- The sitemap includes both primary URLs and alternate language URLs via `xhtml:link` tags
+- Locale-specific 404 pages (like `/en-US/404`) are referenced in sitemap but don't exist as separate files
+- The validation script handles special cases like locale index pages that are in sitemap as alternates
diff --git a/www/index.html b/www/index.html
@@ -10,40 +10,6 @@
       rel="stylesheet"
       type="text/css"
     />
-    <!-- Start Single Page Apps for GitHub Pages -->
-    <script type="text/javascript">
-      // Single Page Apps for GitHub Pages
-      // https://github.com/rafrex/spa-github-pages
-      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
-      // ----------------------------------------------------------------------
-      // This script checks to see if a redirect is present in the query string
-      // and converts it back into the correct url and adds it to the
-      // browser's history using window.history.replaceState(...),
-      // which won't cause the browser to attempt to load the new url.
-      // When the single page app is loaded further down in this file,
-      // the correct url will be waiting in the browser's history for
-      // the single page app to route accordingly.
-      (function (l) {
-        if (l.search) {
-          var q = {};
-          l.search
-            .slice(1)
-            .split('&')
-            .forEach(function (v) {
-              var a = v.split('=');
-              q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
-            });
-          if (q.p !== undefined) {
-            window.history.replaceState(
-              null,
-              null,
-              l.pathname.slice(0, -1) + (q.p || '') + (q.q ? '?' + q.q : '') + l.hash,
-            );
-          }
-        }
-      })(window.location);
-    </script>
-    <!-- End Single Page Apps for GitHub Pages -->
   </head>
   <body>
     <div id="app"></div>

diff --git a/www/package-lock.json b/www/package-lock.json
diff --git a/www/package.json b/www/package.json
@@ -4,7 +4,10 @@
   "description": "the website of recharts",
   "private": true,
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && npm run prerender && npm run validate-sitemap",
+    "build:client": "vite build",
+    "prerender": "tsx scripts/prerender.tsx",
+    "validate-sitemap": "tsx scripts/validate-sitemap.tsx",
     "preview": "vite preview",
     "start": "vite"
   },
@@ -24,6 +27,7 @@
     "@types/react-helmet": "^6.1.11",
     "@vitejs/plugin-react": "^4.7.0",
     "sass": "^1.93.2",
+    "tsx": "^4.20.6",
     "vite": "^6.4.1",
     "vite-plugin-sitemap": "^0.8.2",
     "vitest": "^3.2.4"

diff --git a/www/public/404.html b/www/public/404.html
@@ -1,44 +1,53 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Single Page Apps for GitHub Pages</title>
-    <script type="text/javascript">
-      // Single Page Apps for GitHub Pages
-      // https://github.com/rafrex/spa-github-pages
-      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
-      // ----------------------------------------------------------------------
-      // This script takes the current url and converts the path and query
-      // string into just a query string, and then redirects the browser
-      // to the new url with only a query string and hash fragment,
-      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
-      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
-      // Note: this 404.html file must be at least 512 bytes for it to work
-      // with Internet Explorer (it is currently > 512 bytes)
-      // If you're creating a Project Pages site and NOT using a custom domain,
-      // then set segmentCount to 1 (enterprise users may need to set it to > 1).
-      // This way the code will only replace the route part of the path, and not
-      // the real directory in which the app resides, for example:
-      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
-      // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
-      // Otherwise, leave segmentCount as 0.
-      var segmentCount = 0;
-      var l = window.location;
-      l.replace(
-        l.protocol +
-          '//' +
-          l.hostname +
-          (l.port ? ':' + l.port : '') +
-          l.pathname
-            .split('/')
-            .slice(0, 1 + segmentCount)
-            .join('/') +
-          '/?p=/' +
-          l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
-          (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
-          l.hash,
-      );
-    </script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Page Not Found - Recharts</title>
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        background: #f5f5f5;
+      }
+      .container {
+        text-align: center;
+        padding: 2rem;
+      }
+      h1 {
+        font-size: 4rem;
+        margin: 0;
+        color: #333;
+      }
+      p {
+        font-size: 1.25rem;
+        color: #666;
+        margin: 1rem 0 2rem;
+      }
+      a {
+        display: inline-block;
+        padding: 0.75rem 1.5rem;
+        background: #8884d8;
+        color: white;
+        text-decoration: none;
+        border-radius: 4px;
+        transition: background 0.2s;
+      }
+      a:hover {
+        background: #7070c0;
+      }
+    </style>
   </head>
-  <body></body>
+  <body>
+    <div class="container">
+      <h1>404</h1>
+      <p>Page not found</p>
+      <a href="/">Go to Homepage</a>
+    </div>
+  </body>
 </html>