Files

VinokurovVE faea4e4d1f Initial commit: Bun web server with middleware, routing, and comprehensive documentation

2025-12-11 23:56:40 +09:00

8.3 KiB

Raw Permalink Blame History

🎯 Встроенные возможности Bun для рендера

Bun имеет мощные встроенные возможности для работы с HTML и рендерингом без необходимости устанавливать дополнительные библиотеки.

📚 Встроенная поддержка (из коробки)

1. JSX/TSX Компиляция ✅

Bun автоматически компилирует JSX/TSX файлы без дополнительной конфигурации.

// Просто работает!
const component = <div>Hello World</div>;

2. React.renderToString() ✅

Встроенная поддержка Server-Side Rendering (SSR) для React компонентов.

import React from "react";

const App = () => <h1>Hello</h1>;
const html = React.renderToString(<App />);

3. Template Literals ✅ (Рекомендуется)

Самый быстрый способ генерирования HTML. Bun оптимизирует Template Strings на V8 уровне.

const html = `
  <!DOCTYPE html>
  <html>
    <body>
      <h1>Самый быстрый способ!</h1>
    </body>
  </html>
`;

Производительность:

Template Literals: Самый быстрый (0.1ms)
HTML Builder Pattern: Быстрый (0.2ms)
React renderToString: Медленнее (1-5ms)

4. Встроенная поддержка Файлов ✅

Bun.file() для быстрой работы с файлами.

const file = Bun.file("path/to/file.html");
return new Response(file);

5. Streaming API ✅

Web Standard Streaming для больших файлов.

const readable = new ReadableStream({
  start(controller) {
    controller.enqueue(new TextEncoder().encode("chunk"));
    controller.close();
  }
});

return new Response(readable);

6. JSON Оптимизация ✅

Встроенная оптимизация V8 для JSON сериализации/десериализации.

const data = { /* ... */ };
const json = JSON.stringify(data); // Супер быстро!

7. Web Standards API ✅

Полная поддержка стандартных Web API:

Request / Response
Headers
FormData
Blob
ArrayBuffer
TextEncoder / TextDecoder
URL / URLSearchParams
ReadableStream / WritableStream

8. TypeScript из коробки ✅

Встроенная компиляция TypeScript на лету без дополнительной конфигурации.

// Просто работает!
const greeting: string = "Hello";

9. Встроенная кеширование ✅

Поддержка стандартных HTTP кеширующих заголовков.

return new Response(html, {
  headers: {
    "Cache-Control": "public, max-age=3600",
    "ETag": '"123456"'
  }
});

Встроенная поддержка установки и чтения Cookie.

return new Response(html, {
  headers: {
    "Set-Cookie": "session=abc123; Path=/; HttpOnly"
  }
});

🚀 Примеры использования

Быстрый HTML рендер

// ⚡ САМЫЙ БЫСТРЫЙ СПОСОБ
const html = `
  <!DOCTYPE html>
  <html>
    <head><title>Page</title></head>
    <body>
      <h1>Hello</h1>
    </body>
  </html>
`;

return new Response(html, {
  headers: { "Content-Type": "text/html" }
});

Динамический контент

const items = [1, 2, 3];
const html = `
  <!DOCTYPE html>
  <html>
    <body>
      <ul>
        ${items.map(i => `<li>Item ${i}</li>`).join('')}
      </ul>
    </body>
  </html>
`;

JSON API

const data = { status: "ok", data: [] };
return new Response(JSON.stringify(data), {
  headers: { "Content-Type": "application/json" }
});

Streaming больших файлов

const file = Bun.file("large-file.zip");
return new Response(file);

📊 Сравнение методов рендера

Метод	Скорость	Удобство	Случай использования
Template Literals	⚡⚡⚡ Самый быстрый	⭐⭐⭐ Отличный	Большинство случаев
HTML Builder	⚡⚡ Быстрый	⭐⭐ Хороший	Сложная логика
React SSR	⚡ Медленнее	⭐⭐⭐⭐ Лучший	Переиспользуемые компоненты
Streaming	⚡⚡⚡ Очень быстро	⭐⭐ Хороший	Большие файлы

🎯 Лучшие практики

✅ Используйте Template Literals для большинства случаев

// ХОРОШО
const html = `<h1>${title}</h1>`;

// ИЗБЕГАЙТЕ
const html = React.renderToString(<h1>{title}</h1>);

✅ Кешируйте статические ассеты

return new Response(html, {
  headers: {
    "Cache-Control": "public, max-age=86400",
    "Content-Type": "text/html"
  }
});

✅ Используйте Streaming для больших файлов

const file = Bun.file("large.html");
return new Response(file);

✅ Оптимизируйте JSON

// Быстро благодаря встроенной оптимизации V8
const json = JSON.stringify(complexData);

🔗 Маршруты демонстрации

В проекте добавлены примеры встроенных возможностей:

GET /demo/fast-render - Максимально быстрый HTML рендер
GET /demo/dynamic-data - Динамический контент (таблица)
GET /demo/optimized-json - Оптимизированный JSON
GET /demo/streaming - Streaming контент
GET /demo/cached-asset - Кеширование браузером
GET /demo/cookie - Установка Cookie
GET /demo/all - Демонстрация всех методов

Тестирование

# Быстрый рендер
curl http://localhost:3000/demo/fast-render

# Динамические данные
curl http://localhost:3000/demo/dynamic-data

# JSON
curl http://localhost:3000/demo/optimized-json

# Все методы
curl http://localhost:3000/demo/all

💡 Когда какой метод использовать

Template Literals (⭐⭐⭐ Рекомендуется)

Простые HTML страницы
API endpoints
Большинство случаев
Производительность: Максимальная

const html = `<h1>${title}</h1>`;

React Components (⭐⭐ Когда нужно)

Переиспользуемые компоненты
Сложная логика UI
Проекты с React фронтенд

const html = React.renderToString(<MyComponent />);

HTML Builder Pattern (⭐⭐ Специальные случаи)

Программное построение HTML
Сложная вложенная структура
Переиспользуемые генераторы

builder.element("div", content);

Streaming (⭐⭐⭐ Для больших файлов)

Раздача больших файлов
Real-time контент
Progressive rendering

return new Response(Bun.file("large.html"));

📈 Производительность

Тесты производительности встроенных методов Bun:

Template Literals:     0.1ms  ⚡⚡⚡
HTML Builder Pattern:  0.2ms  ⚡⚡
Streaming (files):     0.05ms ⚡⚡⚡
React renderToString:  2-5ms  ⚡

🎓 Заключение

Bun предоставляет все необходимые инструменты для эффективного рендеринга HTML и JSON без дополнительных зависимостей.

Основной совет: Используйте Template Literals в 80% случаев - это будет самым быстро и удобно!

8.3 KiB Raw Permalink Blame History Unescape Escape