Вложенные маршруты

Fresh — это современный фреймворк для разработки веб-приложений на JavaScript и TypeScript, ориентированный на высокую производительность и минимизацию клиентской нагрузки. Его ключевая особенность — рендеринг на сервере и генерация полностью статических страниц с возможностью динамических компонентов, что обеспечивает мгновенную загрузку страниц и улучшает SEO. Fresh построен на Deno, что отличает его от традиционных Node.js решений.

Архитектура Fresh

1. Рендеринг на сервере (SSR) Fresh использует SSR по умолчанию. Каждый компонент или страница рендерится на сервере и отправляется клиенту уже в виде готового HTML. Это снижает время до первого отображения (Time to First Byte) и улучшает восприятие пользователем.

2. Атомарные компоненты Компоненты в Fresh делятся на острые (islands) и статические. Острые компоненты позволяют подключать интерактивность только там, где это необходимо, без загрузки лишнего JavaScript на клиент. Статические компоненты рендерятся полностью на сервере и не требуют JavaScript на фронтенде.

3. Файловая структура проекта Проект Fresh имеет строгую и логичную файловую структуру:

  • routes/ — директория для страниц и маршрутов;
  • components/ — переиспользуемые UI-компоненты;
  • islands/ — интерактивные компоненты, загружаемые по требованию;
  • static/ — статические ресурсы (изображения, CSS, шрифты).

Вложенные маршруты

В Fresh маршруты строятся на основе файловой системы. Каждая страница — это файл в директории routes. Вложенные маршруты создаются через поддиректории, что позволяет легко структурировать приложение.

Пример структуры вложенных маршрутов:

routes/
├── index.tsx           // Главная страница
├── about.tsx           // Страница "О нас"
├── blog/
│   ├── index.tsx       // Список всех постов
│   └── [id].tsx        // Страница конкретного поста

Ключевые моменты:

  • blog/index.tsx отвечает за отображение списка постов.
  • blog/[id].tsx использует динамический сегмент [id] для генерации страниц с индивидуальным контентом.
  • Вложенные маршруты автоматически наследуют путь родительской папки (/blog в данном случае).

Динамические маршруты

Deno Fresh поддерживает динамические сегменты пути через синтаксис [param]. Такие маршруты позволяют передавать данные прямо через URL.

Пример динамического маршрута:

export interface PageProps {
  params: { id: string };
}

export default function BlogPost({ params }: PageProps) {
  return (
    <main>
      <h1>Пост {params.id}</h1>
      <p>Содержимое поста загружается с сервера.</p>
    </main>
  );
}

Особенности:

  • params.id соответствует имени файла [id].tsx.
  • Можно создавать вложенные динамические маршруты, например routes/blog/[category]/[post].tsx.
  • Динамические маршруты интегрируются с серверными обработчиками данных через getStaticProps или прямой запрос к базе данных.

Переиспользование компонентов в вложенных маршрутах

Вложенные маршруты позволяют структурировать страницы и переиспользовать компоненты между ними. Компоненты могут быть как статическими, так и интерактивными.

Пример использования islands:

// islands/LikeButton.tsx
import { useState } from "preact/hooks";

export default function LikeButton() {
  const [likes, setLikes] = useState(0);
  return (
    <button onCl ick={() => setLikes(likes + 1)}>
      Лайки: {likes}
    </button>
  );
}
// routes/blog/[id].tsx
import LikeButton from "../. ./islands/LikeButton.tsx";

export default function BlogPost({ params }: PageProps) {
  return (
    <main>
      <h1>Пост {params.id}</h1>
      <LikeButton />
    </main>
  );
}
  • Компонент LikeButton будет загружаться на клиент только там, где он нужен, экономя ресурсы и ускоряя загрузку страницы.
  • Вложенные маршруты обеспечивают ясную структуру и удобство организации компонентов.

Параметры маршрутов и SEO

Использование вложенных и динамических маршрутов позволяет создавать чистые и семантичные URL, что критично для SEO. Например, /blog/technology/123 ясно отражает структуру сайта и содержание страницы.

Пример с параметрами для SEO:

export default function BlogPost({ params }: PageProps) {
  return (
    <main>
      <h1>Технологии: {params.category}</h1>
      <p>Пост ID: {params.post}</p>
    </main>
  );
}
  • params.category и params.post автоматически заполняются из URL.
  • Это позволяет генерировать мета-теги и описания для каждой страницы индивидуально.

Итоговая структура вложенных маршрутов

  • Статические маршруты: routes/about.tsx → /about
  • Вложенные маршруты: routes/blog/index.tsx → /blog
  • Динамические маршруты: routes/blog/[id].tsx → /blog/123
  • Глубокие вложенные динамические маршруты: routes/blog/[category]/[post].tsx → /blog/tech/123

Использование вложенных маршрутов в Fresh обеспечивает:

  • Четкую структуру проекта;
  • Легкость работы с динамическим контентом;
  • Оптимизацию производительности за счет SSR и islands.

В совокупности эти возможности делают Fresh мощным инструментом для построения современных веб-приложений с минимальной клиентской нагрузкой.

Оглавление