Refactor SSR implementation and update documentation. Replaced Static Site Generation (SSG) with Server-Side Rendering (SSR) using react-dom/server. Updated scripts for SSR rendering and removed deprecated prerender-multi.js. Enhanced terms.html generation from React components. Updated dependencies for Babel and added support for canvas in SSR.

2025-10-24 11:34:04 +03:00
parent 9110e79d6b
commit 08ffd5a740
6 changed files with 765 additions and 347 deletions
@@ -0,0 +1,93 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/* eslint-disable no-undef */
+
+// Настройка Babel для транспиляции TSX/JSX в Node.js
+require('@babel/register')({
+  extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript'
+  ],
+  ignore: [/node_modules/],
+  cache: false
+});
+
+const fs = require('fs');
+const path = require('path');
+const React = require('react');
+const { renderToString } = require('react-dom/server');
+const { JSDOM } = require('jsdom');
+const { createCanvas } = require('canvas');
+
+// Настройка полноценного DOM окружения через jsdom
+const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
+  url: 'http://localhost',
+  pretendToBeVisual: true,
+  resources: 'usable'
+});
+
+const canvas = createCanvas(200, 200);
+
+// Расширяем jsdom canvas поддержкой
+dom.window.HTMLCanvasElement.prototype.getContext = function() {
+  return createCanvas(200, 200).getContext('2d');
+};
+
+global.window = dom.window;
+global.document = dom.window.document;
+global.navigator = dom.window.navigator;
+global.HTMLElement = dom.window.HTMLElement;
+global.SVGElement = dom.window.SVGElement;
+
+console.log('🚀 Запуск SSR с рендерингом React компонентов...');
+
+try {
+  // Импортируем компоненты
+  const { UnderConstruction } = require('../src/pages/under-construction/underConstruction.tsx');
+  const { Terms } = require('../src/pages/terms/Terms.tsx');
+
+  console.log('✅ Компоненты загружены');
+
+  // Рендерим компоненты в HTML
+  const homeContent = renderToString(React.createElement(UnderConstruction));
+  const termsContent = renderToString(React.createElement(Terms));
+
+  console.log('✅ Компоненты отрендерены');
+
+  // Читаем dist/index.html
+  const distPath = path.resolve(__dirname, '../dist');
+  const indexPath = path.join(distPath, 'index.html');
+  let indexHtml = fs.readFileSync(indexPath, 'utf-8');
+
+  // 1. Главная страница
+  const searchString = '<div id="app"></div>';
+  if (indexHtml.includes(searchString)) {
+    indexHtml = indexHtml.replace(searchString, `<div id="app">${homeContent}</div>`);
+    fs.writeFileSync(indexPath, indexHtml, 'utf-8');
+    console.log('✅ index.html обновлен с SSR контентом');
+  }
+
+  // 2. Страница terms
+  let termsHtml = indexHtml
+    .replace(homeContent, termsContent)
+    .replace('<title>bro-js admin</title>', '<title>Пользовательское соглашение - BROJS.RU</title>')
+    .replace(
+      '</head>',
+      '<meta name="description" content="Пользовательское соглашение для платформы обучения фронтенд-разработке BROJS.RU. Условия использования, обработка персональных данных, права и обязанности сторон." /></head>'
+    );
+
+  const termsPath = path.join(distPath, 'terms.html');
+  fs.writeFileSync(termsPath, termsHtml, 'utf-8');
+  console.log('✅ terms.html создан с SSR контентом');
+
+  console.log('🎉 SSR завершен успешно!');
+  console.log('📄 Созданы: index.html, terms.html');
+  console.log('💡 Весь контент отрендерен через React SSR');
+
+} catch (error) {
+  console.error('❌ Ошибка при SSR:', error.message);
+  console.error(error.stack);
+  process.exit(1);
+}
+