289 lines
8.3 KiB
Markdown
289 lines
8.3 KiB
Markdown
# 🎯 Встроенные возможности Bun для рендера
|
||
|
||
Bun имеет мощные встроенные возможности для работы с HTML и рендерингом без необходимости устанавливать дополнительные библиотеки.
|
||
|
||
## 📚 Встроенная поддержка (из коробки)
|
||
|
||
### 1. **JSX/TSX Компиляция** ✅
|
||
Bun автоматически компилирует JSX/TSX файлы без дополнительной конфигурации.
|
||
|
||
```typescript
|
||
// Просто работает!
|
||
const component = <div>Hello World</div>;
|
||
```
|
||
|
||
### 2. **React.renderToString()** ✅
|
||
Встроенная поддержка Server-Side Rendering (SSR) для React компонентов.
|
||
|
||
```typescript
|
||
import React from "react";
|
||
|
||
const App = () => <h1>Hello</h1>;
|
||
const html = React.renderToString(<App />);
|
||
```
|
||
|
||
### 3. **Template Literals** ✅ (Рекомендуется)
|
||
Самый быстрый способ генерирования HTML. Bun оптимизирует Template Strings на V8 уровне.
|
||
|
||
```typescript
|
||
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()` для быстрой работы с файлами.
|
||
|
||
```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 = `
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head><title>Page</title></head>
|
||
<body>
|
||
<h1>Hello</h1>
|
||
</body>
|
||
</html>
|
||
`;
|
||
|
||
return new Response(html, {
|
||
headers: { "Content-Type": "text/html" }
|
||
});
|
||
```
|
||
|
||
### Динамический контент
|
||
```typescript
|
||
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
|
||
```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 = `<h1>${title}</h1>`;
|
||
|
||
// ИЗБЕГАЙТЕ
|
||
const html = React.renderToString(<h1>{title}</h1>);
|
||
```
|
||
|
||
### ✅ Кешируйте статические ассеты
|
||
```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 = `<h1>${title}</h1>`;
|
||
```
|
||
|
||
### React Components (⭐⭐ Когда нужно)
|
||
- Переиспользуемые компоненты
|
||
- Сложная логика UI
|
||
- Проекты с React фронтенд
|
||
|
||
```typescript
|
||
const html = React.renderToString(<MyComponent />);
|
||
```
|
||
|
||
### 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% случаев - это будет самым быстро и удобно!
|