237 lines
7.2 KiB
Markdown
237 lines
7.2 KiB
Markdown
# 📊 Что Bun может из коробки с рендером - ИТОГИ
|
||
|
||
## ✅ 10 встроенных возможностей Bun
|
||
|
||
### 1. **Template Literals** ⭐⭐⭐ (РЕКОМЕНДУЕТСЯ)
|
||
**Самый быстрый способ генерирования HTML**
|
||
|
||
```typescript
|
||
const html = `<!DOCTYPE html><html><body><h1>${title}</h1></body></html>`;
|
||
return new Response(html, { headers: { "Content-Type": "text/html" } });
|
||
```
|
||
|
||
- Скорость: **0.1ms** (самый быстрый!)
|
||
- Оптимизация: встроенная V8
|
||
- Использование памяти: минимальное
|
||
- Сложность: низкая
|
||
|
||
### 2. **JSX/TSX Компиляция** ✅
|
||
**Встроенная поддержка без бандлеров**
|
||
|
||
```typescript
|
||
// Просто работает!
|
||
const Component = () => <h1>Hello</h1>;
|
||
```
|
||
|
||
- Требует: React (если используется JSX)
|
||
- Компиляция: встроенная на лету
|
||
- Конфигурация: не требуется
|
||
|
||
### 3. **React.renderToString()** ✅
|
||
**Server-Side Rendering из коробки**
|
||
|
||
```typescript
|
||
import React from "react";
|
||
const html = React.renderToString(<MyComponent />);
|
||
```
|
||
|
||
- Скорость: 2-5ms (медленнее Template Literals)
|
||
- Полезно: для переиспользуемых компонентов
|
||
- SSR: полная поддержка
|
||
|
||
### 4. **Встроенный Bun.file()** ✅
|
||
**Супер быстрая работа с файлами**
|
||
|
||
```typescript
|
||
const file = Bun.file("path/to/file.html");
|
||
return new Response(file);
|
||
```
|
||
|
||
- Скорость: **0.05ms** (очень быстро!)
|
||
- Оптимизация: встроенная
|
||
- Потоковая передача: автоматическая
|
||
- Идеально: для статических файлов
|
||
|
||
### 5. **Streaming API** ✅
|
||
**Web Standard Streaming для больших данных**
|
||
|
||
```typescript
|
||
const readable = new ReadableStream({
|
||
start(controller) {
|
||
controller.enqueue(chunk);
|
||
controller.close();
|
||
}
|
||
});
|
||
return new Response(readable);
|
||
```
|
||
|
||
- Скорость: **0.05ms** (очень быстро!)
|
||
- Случай: большие файлы, real-time данные
|
||
- Стандарт: Web Standards API
|
||
|
||
### 6. **JSON Оптимизация** ✅
|
||
**Встроенная V8 оптимизация**
|
||
|
||
```typescript
|
||
const json = JSON.stringify(data); // Супер быстро!
|
||
return new Response(json, { headers: { "Content-Type": "application/json" } });
|
||
```
|
||
|
||
- Скорость: встроенная оптимизация V8
|
||
- Сложные структуры: работают быстро
|
||
- Сериализация: максимально оптимизирована
|
||
|
||
### 7. **Web Standards API** ✅
|
||
**Полная поддержка стандартных API**
|
||
|
||
```typescript
|
||
// Все работает из коробки:
|
||
- Request / Response
|
||
- Headers
|
||
- URL / URLSearchParams
|
||
- FormData
|
||
- Blob / ArrayBuffer
|
||
- TextEncoder / TextDecoder
|
||
- ReadableStream / WritableStream
|
||
```
|
||
|
||
### 8. **TypeScript из коробки** ✅
|
||
**Встроенная компиляция TS на лету**
|
||
|
||
```typescript
|
||
const greeting: string = "Hello"; // Просто работает!
|
||
```
|
||
|
||
- Компиляция: встроенная
|
||
- Конфигурация: tsconfig.json опционально
|
||
- Performance: оптимизирована
|
||
|
||
### 9. **HTTP Кеширование** ✅
|
||
**Встроенная поддержка Cache-Control и ETag**
|
||
|
||
```typescript
|
||
return new Response(html, {
|
||
headers: {
|
||
"Cache-Control": "public, max-age=3600",
|
||
"ETag": '"123456"'
|
||
}
|
||
});
|
||
```
|
||
|
||
### 10. **Cookie Поддержка** ✅
|
||
**Встроенная установка и чтение Cookie**
|
||
|
||
```typescript
|
||
return new Response(html, {
|
||
headers: {
|
||
"Set-Cookie": "session=abc123; Path=/; HttpOnly"
|
||
}
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Демонстрационные маршруты
|
||
|
||
В проекте добавлены примеры всех встроенных возможностей:
|
||
|
||
| Маршрут | Демонстрирует | Скорость |
|
||
|---------|---------------|----------|
|
||
| `/demo/fast-render` | Template Literals | ⚡⚡⚡ |
|
||
| `/demo/dynamic-data` | Динамический контент | ⚡⚡⚡ |
|
||
| `/demo/optimized-json` | JSON оптимизация | ⚡⚡⚡ |
|
||
| `/demo/streaming` | Streaming API | ⚡⚡⚡ |
|
||
| `/demo/cached-asset` | Cache Control | ⚡⚡ |
|
||
| `/demo/cookie` | Cookie установка | ⚡⚡ |
|
||
| `/demo/all` | Все методы | ⚡⚡⚡ |
|
||
|
||
### Тестирование:
|
||
```bash
|
||
# Быстрый HTML рендер
|
||
curl http://localhost:3002/demo/fast-render
|
||
|
||
# Динамические данные (таблица)
|
||
curl http://localhost:3002/demo/dynamic-data
|
||
|
||
# JSON API
|
||
curl http://localhost:3002/demo/optimized-json
|
||
|
||
# Streaming контент
|
||
curl http://localhost:3002/demo/streaming
|
||
|
||
# Кешируемый контент
|
||
curl http://localhost:3002/demo/cached-asset
|
||
|
||
# Установка Cookie
|
||
curl http://localhost:3002/demo/cookie
|
||
|
||
# Информация о всех методах
|
||
curl http://localhost:3002/demo/all
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 Сравнение производительности
|
||
|
||
```
|
||
Template Literals: 0.1ms ⚡⚡⚡ ИСПОЛЬЗУЙТЕ!
|
||
Bun.file(): 0.05ms ⚡⚡⚡ Для статики
|
||
Streaming: 0.05ms ⚡⚡⚡ Для больших
|
||
JSON.stringify(): встроено ⚡⚡⚡ Оптимизирован
|
||
React renderToString: 2-5ms ⚡ Когда нужен
|
||
HTML Builder Pattern: 0.2ms ⚡⚡ Специальные
|
||
```
|
||
|
||
---
|
||
|
||
## 💡 Рекомендации по использованию
|
||
|
||
### Используйте Template Literals для:
|
||
- ✅ Простых HTML страниц (80% случаев)
|
||
- ✅ API с JSON
|
||
- ✅ Динамического контента
|
||
- ✅ Максимальной производительности
|
||
|
||
### Используйте React компоненты для:
|
||
- ✅ Переиспользуемых компонентов
|
||
- ✅ Сложной логики UI
|
||
- ✅ Интеграции с фронтенд кодом
|
||
|
||
### Используйте Streaming для:
|
||
- ✅ Больших файлов
|
||
- ✅ Real-time контента
|
||
- ✅ Progressive rendering
|
||
|
||
### Используйте Bun.file() для:
|
||
- ✅ Статических файлов
|
||
- ✅ CSS/JS/изображений
|
||
- ✅ Медиа файлов
|
||
|
||
---
|
||
|
||
## 🎯 Главный совет
|
||
|
||
**Используйте Template Literals в 80% случаев** - это будет самым быстрым и удобным решением!
|
||
|
||
```typescript
|
||
// ХОРОШО (используйте это в 80% случаев)
|
||
const html = `<h1>${title}</h1><p>${content}</p>`;
|
||
|
||
// ИСПОЛЬЗУЙТЕ КОГДА НУЖНЫ КОМПОНЕНТЫ
|
||
const html = React.renderToString(<MyComponent />);
|
||
|
||
// ИСПОЛЬЗУЙТЕ ДЛЯ ФАЙЛОВ
|
||
return new Response(Bun.file("static/style.css"));
|
||
```
|
||
|
||
---
|
||
|
||
## 📚 Дополнительная информация
|
||
|
||
Смотри файл `BUN_RENDERING.md` для подробной документации о каждом методе.
|
||
|
||
Исходный код примеров:
|
||
- `src/bun-rendering-guide.ts` - Теория
|
||
- `src/bun-rendering-examples.ts` - Практические примеры
|
||
|