Материалы / 12 минут
Собрать быстрый SvelteKit-интерфейс, в котором публичный контент существует до выполнения JavaScript.
Разделяйте документ и приложение
Публичные заголовки, описания, ссылки и учебные материалы должны попадать в серверный или пререндеренный HTML. JavaScript нужен для улучшения опыта, а не для появления основного смысла страницы.
Интерактивные островки подключаются там, где есть состояние: формы, фильтры, прогресс обучения или кабинет. Это уменьшает клиентский код и сохраняет страницу полезной при сбое скрипта.
Маршрут владеет данными
Страница получает типизированную модель и передаёт узкие фрагменты компонентам. Компонент не должен самостоятельно угадывать URL API, формат ошибок или правила доступа.
Повторяемые сущности хранятся как структурированные данные. Это позволяет пререндерить страницы, построить sitemap и проверить полноту контента до запуска браузера.
- Один источник истины для slug, title, description и canonical.
- Стабильные размеры изображений и медиаблоков.
- Состояния loading и error не изменяют геометрию страницы.
Измеряйте стоимость интерактивности
Проверяйте размер route-chunk, число сетевых запросов и работу на узком экране. Большая библиотека оправдана только там, где она удаляет реальную сложность.
Анимации должны использовать transform и opacity, уважать prefers-reduced-motion и не скрывать контент от пользователя без JavaScript.
<script lang="ts">
export let data: { title: string; summary: string };
</script>
<svelte:head><title>{data.title}</title></svelte:head>
<main>
<h1>{data.title}</h1>
<p>{data.summary}</p>
</main>