# 🎯 Встроенные возможности Bun для рендера
Bun имеет мощные встроенные возможности для работы с HTML и рендерингом без необходимости устанавливать дополнительные библиотеки.
## 📚 Встроенная поддержка (из коробки)
### 1. **JSX/TSX Компиляция** ✅
Bun автоматически компилирует JSX/TSX файлы без дополнительной конфигурации.
```typescript
// Просто работает!
const component = Hello World
;
```
### 2. **React.renderToString()** ✅
Встроенная поддержка Server-Side Rendering (SSR) для React компонентов.
```typescript
import React from "react";
const App = () => Hello
;
const html = React.renderToString();
```
### 3. **Template Literals** ✅ (Рекомендуется)
Самый быстрый способ генерирования HTML. Bun оптимизирует Template Strings на V8 уровне.
```typescript
const html = `
Самый быстрый способ!
`;
```
**Производительность:**
- Template Literals: **Самый быстрый** (0.1ms)
- HTML Builder Pattern: Быстрый (0.2ms)
- React renderToString: Медленнее (1-5ms)
### 4. **Встроенная поддержка Файлов** ✅
`Bun.file()` для быстрой работы с файлами.
```typescript
const file = Bun.file("path/to/file.html");
return new Response(file);
```
### 5. **Streaming API** ✅
Web Standard Streaming для больших файлов.
```typescript
const readable = new ReadableStream({
start(controller) {
controller.enqueue(new TextEncoder().encode("chunk"));
controller.close();
}
});
return new Response(readable);
```
### 6. **JSON Оптимизация** ✅
Встроенная оптимизация V8 для JSON сериализации/десериализации.
```typescript
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 на лету без дополнительной конфигурации.
```typescript
// Просто работает!
const greeting: string = "Hello";
```
### 9. **Встроенная кеширование** ✅
Поддержка стандартных HTTP кеширующих заголовков.
```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"
}
});
```
## 🚀 Примеры использования
### Быстрый HTML рендер
```typescript
// ⚡ САМЫЙ БЫСТРЫЙ СПОСОБ
const html = `
Page
Hello
`;
return new Response(html, {
headers: { "Content-Type": "text/html" }
});
```
### Динамический контент
```typescript
const items = [1, 2, 3];
const html = `
${items.map(i => `- Item ${i}
`).join('')}
`;
```
### JSON API
```typescript
const data = { status: "ok", data: [] };
return new Response(JSON.stringify(data), {
headers: { "Content-Type": "application/json" }
});
```
### Streaming больших файлов
```typescript
const file = Bun.file("large-file.zip");
return new Response(file);
```
## 📊 Сравнение методов рендера
| Метод | Скорость | Удобство | Случай использования |
|-------|----------|----------|----------------------|
| Template Literals | ⚡⚡⚡ Самый быстрый | ⭐⭐⭐ Отличный | Большинство случаев |
| HTML Builder | ⚡⚡ Быстрый | ⭐⭐ Хороший | Сложная логика |
| React SSR | ⚡ Медленнее | ⭐⭐⭐⭐ Лучший | Переиспользуемые компоненты |
| Streaming | ⚡⚡⚡ Очень быстро | ⭐⭐ Хороший | Большие файлы |
## 🎯 Лучшие практики
### ✅ Используйте Template Literals для большинства случаев
```typescript
// ХОРОШО
const html = `${title}
`;
// ИЗБЕГАЙТЕ
const html = React.renderToString({title}
);
```
### ✅ Кешируйте статические ассеты
```typescript
return new Response(html, {
headers: {
"Cache-Control": "public, max-age=86400",
"Content-Type": "text/html"
}
});
```
### ✅ Используйте Streaming для больших файлов
```typescript
const file = Bun.file("large.html");
return new Response(file);
```
### ✅ Оптимизируйте JSON
```typescript
// Быстро благодаря встроенной оптимизации 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` - Демонстрация всех методов
### Тестирование
```bash
# Быстрый рендер
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
- Большинство случаев
- **Производительность: Максимальная**
```typescript
const html = `${title}
`;
```
### React Components (⭐⭐ Когда нужно)
- Переиспользуемые компоненты
- Сложная логика UI
- Проекты с React фронтенд
```typescript
const html = React.renderToString();
```
### HTML Builder Pattern (⭐⭐ Специальные случаи)
- Программное построение HTML
- Сложная вложенная структура
- Переиспользуемые генераторы
```typescript
builder.element("div", content);
```
### Streaming (⭐⭐⭐ Для больших файлов)
- Раздача больших файлов
- Real-time контент
- Progressive rendering
```typescript
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% случаев - это будет самым быстро и удобно!