Современная генерация sitemap для приложений React Router v7

// src/utils/sitemap-generator.ts
interface SitemapUrl {
  url: string;
  lastmod?: string;
  changefreq?: 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'never';
  priority?: number;
}

export const generateStaticUrls = (): SitemapUrl[] => {
  const staticUrls: SitemapUrl[] = [
    { url: '/', lastmod: new Date().toISOString().split('T')[0], changefreq: 'daily', priority: 1.0 },
    { url: '/about', lastmod: new Date().toISOString().split('T')[0], changefreq: 'monthly', priority: 0.8 },
    { url: '/contact', lastmod: new Date().toISOString().split('T')[0], changefreq: 'monthly', priority: 0.8 },
    { url: '/terms', lastmod: new Date().toISOString().split('T')[0], changefreq: 'yearly', priority: 0.5 },
  ];

  return staticUrls;
};

export const generateDynamicUrls = async (): Promise<SitemapUrl[]> => {
  try {
    // Получение профилей поставщиков
    const providers = await fetch('/api/providers').then(res => res.json());
    const providerUrls = providers.map((provider: any) => ({
      url: `/hp/${provider.slug}`,
      lastmod: provider.updatedAt?.split('T')[0] || new Date().toISOString().split('T')[0],
      changefreq: 'weekly',
      priority: 0.7
    }));

    // Получение деталей услуг
    const services = await fetch('/api/services').then(res => res.json());
    const serviceUrls = services.map((service: any) => ({
      url: `/service-details/${service.id}/${service.slug}`,
      lastmod: service.updatedAt?.split('T')[0] || new Date().toISOString().split('T')[0],
      changefreq: 'weekly', 
      priority: 0.6
    }));

    return [...providerUrls, ...serviceUrls];
  } catch (error) {
    console.error('Не удалось получить динамические URL:', error);
    return [];
  }
};

export const generateSitemapXml = (urls: SitemapUrl[]): string => {
  const xmlHeader = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`;
  
  const xmlFooter = `</urlset>`;
  
  const urlEntries = urls.map(url => `
  <url>
    <loc>${url.url}</loc>
    ${url.lastmod ? `<lastmod>${url.lastmod}</lastmod>` : ''}
    ${url.changefreq ? `<changefreq>${url.changefreq}</changefreq>` : ''}
    ${url.priority ? `<priority>${url.priority}</priority>` : ''}
  </url>`).join('');
  
  return xmlHeader + urlEntries + xmlFooter;
};

// src/components/Sitemap.tsx
export const Sitemap = ({ urls }: { urls: SitemapUrl[] }) => {
  return (
    <div className="sitemap-container">
      <h2>Карта сайта</h2>
      <ul className="sitemap-list">
        {urls.map((url, index) => (
          <li key={index}>
            <a href={url.url}>{url.url}</a>
            <span className="sitemap-meta">
              {url.lastmod && <span>Обновлено: {url.lastmod}</span>}
              {url.priority && <span>Приоритет: {url.priority}</span>}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
};

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { generateSitemap } from './src/utils/sitemap-generator';

export default defineConfig({
  plugins: [
    react(),
    {
      name: 'generate-sitemap',
      async closeBundle() {
        console.log('Генерация sitemap...');
        
        // Генерация статических URL
        const staticUrls = generateStaticUrls();
        
        // Генерация динамических URL
        const dynamicUrls = await generateDynamicUrls();
        
        // Объединение всех URL
        const allUrls = [...staticUrls, ...dynamicUrls];
        
        // Генерация XML sitemap
        const sitemapXml = generateSitemapXml(allUrls);
        
        // Запись sitemap.xml в публичную директорию
        await fs.writeFile('public/sitemap.xml', sitemapXml);
        
        // Генерация данных HTML sitemap
        await fs.writeFile('public/sitemap-data.json', JSON.stringify(allUrls));
        
        console.log('Sitemap успешно сгенерирован!');
      }
    }
  ],
});

// src/routes.tsx
import { RouteObject } from 'react-router-dom';
import { Sitemap } from './components/Sitemap';

export const routes: RouteObject[] = [
  // Ваши существующие маршруты...
  {
    path: '/sitemap',
    element: <Sitemap urls={sitemapUrls} />
  },
  {
    path: '/sitemap.xml',
    element: <SitemapXml urls={sitemapUrls} />
  }
];

// Импорт данных sitemap (сгенерированных во время сборки)
import sitemapUrls from '../public/sitemap-data.json';

export const generateParametrizedUrls = async (): Promise<SitemapUrl[]> => {
  const urls: SitemapUrl[] = [];
  
  // Профили поставщиков
  const providers = await fetch('/api/providers').then(res => res.json());
  urls.push(...providers.map((p: any) => ({
    url: `/hp/${p.slug}`,
    lastmod: p.updatedAt?.split('T')[0],
    changefreq: 'weekly',
    priority: 0.7
  })));
  
  // Детали услуг
  const services = await fetch('/api/services').then(res => res.json());
  urls.push(...services.map((s: any) => ({
    url: `/service-details/${s.id}/${s.slug}`,
    lastmod: s.updatedAt?.split('T')[0],
    changefreq: 'weekly',
    priority: 0.6
  })));
  
  return urls;
};

// package.json
{
  "scripts": {
    "build": "vite build && npm run generate-sitemap",
    "generate-sitemap": "node scripts/generate-sitemap.js"
  }
}