Блогта 25 пост бар, үш тілде. Барлығы бір бетке жүктелетін. Google бір ұзын мәтін көреді, құрылым жоқ. Пайдаланушы 25 карточканың рендерін күтеді. Ал қазақ әріптері (Ә, Ғ, Қ, Ң, Ө) жүйелік шрифтпен көрсетілетін - Inter шрифтінің ішінде газет қиындысы сияқты.

Пагинация және қазақ шрифті

1-мәселе: бәрі бір бетте

Astro статикалық HTML генерациялайды. 25 пост - суреттері, тегтері, күндері бар 25 карточка. Іздеу жүйесі үшін /blog/ - бүкіл контенті бар бір бет. Пагинация жоқ - құрылым жоқ - тереңірек индекстеуге себеп жоқ.

Шешім: paginate() + «Тағы көрсету»

Astro-да пагинация дайын. [...page].astro файлы paginate() функциясымен /blog/, /blog/2/, /blog/3/ беттерін автоматты генерациялайды.

export const getStaticPaths = (async ({ paginate }) => {
  const posts = (await getCollection('blog', (e) => e.data.locale === 'kk'))
    .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
  return paginate(posts, { pageSize: 9 });
}) satisfies GetStaticPaths;

Бетіне 9 пост - 3×3 торы. Краулерлер статикалық беттерді аралайды. Пайдаланушылар «Тағы көрсету» батырмасын көреді - ол fetch() арқылы келесі бөлікті бет ауыстырусыз жүктейді.

fetch(nextUrl)
  .then(function (res) { return res.text(); })
  .then(function (html) {
    var doc = new DOMParser().parseFromString(html, 'text/html');
    var newCards = doc.querySelectorAll('#blog-grid > .blog-card');
    newCards.forEach(function (card) {
      grid.appendChild(document.importNode(card, true));
    });
  });

Амал - келесі беттің HTML-ін парсимыз және DOM-нан карточкаларды аламыз. API жоқ, JSON жоқ. Статикалық беттер бар - одан керек элементтерді аламыз.

JS өшірулі пайдаланушылар үшін - <noscript> ішінде «Алдыңғы» / «Келесі» сілтемелер.

SEO бөлшектері

Әр бетте head-те <link rel="next"> және <link rel="prev"> бар. 2+ беттерде title-ға нөмір қосылады: «Блог - imarch.dev - Бет 2». Sitemap барлық пагинация URL-дерін үш тілдің hreflang-ымен қамтиды.

2-мәселе: қазақ әріптері

Inter - сайттың негізгі шрифті. Екі подмножество жүктелген: latin және cyrillic. Орыс мәтіні тамаша көрінеді. Бірақ қазақ кириллицасында негізгі Cyrillic диапазонынан тыс әріптер бар: Ә, Ғ, Қ, Ң, Ө, Ұ, Ү, Һ.

Бұл әріптер Unicode-тің Cyrillic Extended блогында (U+0460–052F) орналасқан. Браузер оларды жүктелген woff2-файлдардан таба алмайды және жүйелік шрифтке ауысады. Нәтижесі - мәтіннің ортасында басқа гарнитурадан әріптер.

Шешім: бір файл

Inter-де барлық қазақ глифтері бар. Олар жай негізгі подмножествоға кірмеген. Үшінші woff2-файл керек - cyrillic-ext.

// BaseLayout.astro - AstroFont config
{
  path: './public/fonts/inter-cyrillic-ext-wght-normal.woff2',
  style: 'normal',
  weight: '100 900',
}

26 КБ. Fontsource CDN-нен жүктедім, шрифт конфигурациясына қостым. Барлық қазақ әріптері енді қалған мәтінмен бірдей Inter-мен көрсетіледі.

Қорытынды

Екі түзету, бір кеш:

Пагинация - SEO үшін paginate() + UX үшін fetch(). Краулерлерге статикалық беттер, адамдарға lazy load
Шрифт - бір woff2-файл (26 КБ) барлық қазақ символдарын жапты

Екі өзгеріс те - тәуелділіктер нөл, күрделілік нөл. Кейде бар нәрсені жүктеу жеткілікті.

Сайттың бастапқы коды ашық. Astro-да көптілді блог жасап жатсаңыз - жазыңыз, толығырақ айтайын.