Когда использовать Page.js

Page.js — это минималистичная библиотека для клиентской маршрутизации в одностраничных приложениях (SPA). Она работает на основе изменения URL через HTML5 History API и поддерживает hash-based маршрутизацию для старых браузеров. Основной принцип — связывать определённые URL с функциями-обработчиками, которые управляют отображением содержимого страницы без её полной перезагрузки.

Маршруты в Page.js описываются с помощью функции page(path, callback). Путь может быть статическим (/about) или динамическим с параметрами (/user/:id), что позволяет извлекать значения параметров через объект ctx.params внутри обработчика.

page('/user/:id', ctx => {
  console.log(ctx.params.id);
});

Когда использовать Page.js

1. Одностраничные приложения

Page.js оптимально подходит для SPA, где необходимо:

  • Управлять навигацией без перезагрузки страницы.
  • Сохранять состояние интерфейса при переходах.
  • Поддерживать динамическое формирование контента в зависимости от URL.

В отличие от серверной маршрутизации, Page.js позволяет клиенту загружать только нужные компоненты, что повышает скорость отклика и снижает нагрузку на сервер.

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

Поддержка параметров и регулярных выражений делает Page.js удобным инструментом для приложений с динамическими страницами, например:

  • Профили пользователей (/user/:id)
  • Статьи блога (/article/:slug)
  • Категории товаров (/category/:name)
page('/article/:slug', ctx => {
  const slug = ctx.params.slug;
  fetch(`/api/articles/${slug}`)
    .then(res => res.json())
    .then(data => renderArticle(data));
});

3. История браузера и SEO

Page.js использует History API для управления состоянием браузера:

  • pushState позволяет менять URL без перезагрузки.
  • replaceState актуально для редиректов или обновления текущего состояния.
  • Возможна интеграция с серверной маршрутизацией для SEO, если настроить fallback на сервере.
page('/', () => showHome());
page('/login', () => showLogin());
page();

4. Контроль навигации и промежуточные функции

Page.js поддерживает middleware, что позволяет вставлять обработчики между маршрутом и рендерингом:

  • Проверка авторизации
  • Логирование переходов
  • Загрузка данных перед отображением страницы
function auth(ctx, next) {
  if (!ctx.user) {
    page.redirect('/login');
  } else {
    next();
  }
}

page('/dashboard', auth, () => showDashboard());

5. Асинхронная загрузка данных

Page.js упрощает работу с асинхронными операциями перед рендерингом:

  • Подгрузка JSON через fetch
  • Динамический импорт компонентов через import()
  • Использование промисов для задержки отображения страницы до получения данных
page('/profile/:id', async ctx => {
  const data = await fetch(`/api/users/${ctx.params.id}`).then(r => r.json());
  renderProfile(data);
});

6. Простота интеграции и легковесность

Page.js не навязывает структуру проекта, не требует больших зависимостей и легко интегрируется с:

  • Vanilla JavaScript
  • React, Vue, Svelte (как клиентская маршрутизация)
  • Любыми сборщиками модулей (Webpack, Vite, Parcel)

Её объём — всего несколько килобайт, что делает библиотеку подходящей для небольших и средних проектов, где не нужен полноценный роутер типа React Router.

7. Работа с параметрами и query

Библиотека предоставляет возможность извлекать параметры маршрута (ctx.params) и query-параметры (ctx.querystring):

page('/search', ctx => {
  const query = new URLSearchParams(ctx.querystring).get('q');
  searchArticles(query);
});

Это упрощает построение фильтров, поиска и динамических списков.

8. Редиректы и fallback маршруты

Page.js позволяет управлять редиректами и обрабатывать неизвестные маршруты:

page('/old-page', () => page.redirect('/new-page'));
page('*', () => showNotFound());

Это особенно важно для поддержания корректной навигации и пользовательского опыта при изменении структуры сайта.

Эти особенности делают Page.js универсальным инструментом для SPA, где важны легковесность, контроль над навигацией и динамическая подгрузка контента. Использование middleware, поддержка параметров маршрутов и query-параметров, а также интеграция с History API позволяют создавать гибкие, быстрые и масштабируемые приложения на чистом JavaScript.

Оглавление