Mundarija (27)
- Bu darsda
- 1. Nega bu kerak?
- 2. <title> — komponentdan
- 2.1 Birinchi sarlavha
- 2.2 Tuzoq: sarlavha bo'sh
- 2.3 Ikki <title>
- 3. <meta> va <link>
- 3.1 Ko'tariladi
- 3.2 Stylesheet va precedence
- 3.3 <script async> — bir marta
- 4. Resurs maslahatlari — react-dom API'lari
- 4.1 To'rt funksiya
- 4.2 Qayerda chaqiriladi
- 4.3 Maslahat — bepul emas
- 5. Vazifalar qadami: sarlavhada qolganlar soni (holat 12)
- 5.1 Bitta qator
- 5.2 preconnect — o'lchandi va kirmadi
- 5.3 Commit
- 6. Ko'p uchraydigan xatolar
- 7. Mashqlar
- 1-mashq (oson): qaysi funksiya?
- 2-mashq (o'rta): savat sarlavhada
- 3-mashq (qiyin): sahifa komponenti o'z metadatasini yozadi
- 4-mashq: Vazifalar qadami
- 8. Real ishda
- Xulosa
- Manbalar
React 19 hujjat metadata: title, meta, link komponentda va preload, preinit, preconnect API'lari
Qisqacha: React 19 da
<title>,<meta>va<link>ni istalgan komponent ichida yozish mumkin — React ularni o'zi<head>ga ko'taradi (hoisting). Sahifa sarlavhasi uchun endiuseEffectvadocument.titleshart emas.<title>ning ichi esa bitta satr bo'lishi kerak — shablon satri bilan. Stil uchun<link rel="stylesheet" precedence="…">: u yuklanmaguncha kontent ko'rsatilmaydi va takror stil bir marta qo'shiladi.<script async>ham takrorlanmaydi.react-domdagiprefetchDNS,preconnect,preload,preinitfunksiyalari esa brauzerga "bu resurs tez orada kerak" deb oldindan aytadi. Lekin har maslahat ham foyda bermaydi — o'lchab qo'shing.
Bu darsda
- Brauzer tabidagi sarlavhani komponentdan yangilaysiz va
<title>dagi "bo'sh sarlavha" tuzog'ini ko'rasiz. <meta>va<link>qanday<head>ga ko'tarilishini konsolda tekshirasiz.- Stylesheet
precedencevaasyncscript nima uchun takrorlanmasligini bilasiz. prefetchDNS,preconnect,preload,preinitni farqlay olasiz va qayerda chaqirishni tanlaysiz.vazifalarsarlavhasiga qolgan vazifalar sonini qo'shasiz va negapreconnectkanonga kirmaganini o'lchov bilan tushuntirasiz.
Oldin bilishingiz kerak: head anatomiyasi, Resurs maslahatlari: preload, preconnect, JSX II, Effekt.
1. Nega bu kerak?
Telegram veb-versiyasini ochiq qoldirib, boshqa tabda ishlaysiz. Yangi xabar kelganda tab sarlavhasi "(3) Telegram" bo'ladi — tabga qaramasdan ham bilasiz. «Bahor» ning buyurtmalar panelida ham Jasur aka shuni xohlaydi: "(5) Buyurtmalar" — yangi buyurtmalar soni.
head anatomiyasi darsidan bilasiz: sarlavha <head> dagi <title> da. React ilovasi esa <body> ichidagi #root ga chiziladi — <head> uning "qo'li yetmaydigan" joy. React 19 gacha ikki yo'l bor edi: effektda document.title = … yoki react-helmet kabi kutubxona. Birinchisi — har sahifada takrorlanadigan qo'lda kod. Ikkinchisi — qo'shimcha paket.
Ikkinchi muammo — resurslar. Xarita sahifasi uchun xarita.js skripti kerak. Uni har komponent o'zi document.createElement("script") bilan qo'shardi. Ikki joyda ishlatilsa — ikki marta yuklanardi.
Hayotiy o'xshatish: kitobning muqovasi va ichki sahifalari. Muqovadagi nom (sarlavha) — kitobning "boshida", lekin uni muallif yozadi, qaysi bobda nima borligiga qarab. React 19 da har komponent o'z bobidan turib "muqovaga shuni yozing" deya oladi. React esa so'rovlarni yig'ib, muqovaga o'zi yozadi.
2. <title> — komponentdan
2.1 Birinchi sarlavha
import { useEffect, useState } from "react";
export default function App() {
const [orders, setOrders] = useState(2);
useEffect(() => {
console.log("tab sarlavhasi:", document.title);
});
return (
<main>
<title>{`(${orders}) Buyurtmalar — Bahor`}</title>
<h1>Buyurtmalar: {orders}</h1>
<button onClick={() => setOrders(orders + 1)}>
+1 buyurtma
</button>
</main>
);
}Konsolda:
tab sarlavhasi: (2) Buyurtmalar — Bahor
tab sarlavhasi: (3) Buyurtmalar — BahorEkranda:
Buyurtmalar: 3
+1 buyurtma<title> JSX'da <main> ichida yozilgan, lekin «Ekranda» bo'limida yo'q — React uni <head> ga ko'tardi. document.title esa yangilandi: buyurtma qo'shilganda sarlavha ham. Effekt yo'q, document.title = … yo'q: sarlavha — oddiy JSX, state'dan chiziladi (UI = f(state)).
Komponent ekrandan olib tashlansa, uning <title> i ham <head> dan o'chadi. Shuning uchun har sahifa komponenti o'z sarlavhasini o'zi yozadi.
2.2 Tuzoq: sarlavha bo'sh
Eng tabiiy yozuv — <title>({orders}) Buyurtmalar</title>. Ko'ring:
import { useEffect } from "react";
export default function App() {
const orders = 2;
useEffect(() => {
console.log("tab sarlavhasi:", JSON.stringify(document.title));
});
return (
<main>
<title>({orders}) Buyurtmalar</title> {/* ❌ */}
<h1>Buyurtmalar</h1>
</main>
);
}Konsolda:
tab sarlavhasi: ""Sarlavha bo'sh — va hech qanday ogohlantirish yo'q. Sabab — JSX I dan: ({orders}) Buyurtmalar JSX'da uchta bola bo'ladi: "(", 2, ") Buyurtmalar" — massiv. Oddiy elementda React ularni yonma-yon chizadi. <title> esa maxsus: brauzer sarlavhasi bitta matn, React u yerda faqat bitta satr (yoki son) qabul qiladi.
Davosi — shablon satri (template literal) bilan bitta qiymat: <title>{(${orders}) Buyurtmalar}</title>. vazifalar kanoni ham aynan shunday yozadi.
2.3 Ikki <title>
Bir nechta komponent <title> yozsa — <head> da bir nechta <title> bo'ladi. Brauzer birinchisini oladi. Ko'pincha index.html da ham statik <title> bor. JavaScript yuklanmasa yoki ijtimoiy tarmoq havola ko'rinishini olsa — u kerak. vazifalar da shunday bo'ldi. Haqiqiy Chrome'da (e2e-18) <head> da 2 ta <title> bor edi: React'niki birinchi, document.title — React'niki. HTML qoidasi bo'yicha esa sarlavha bitta bo'lishi kerak — kanonda bu TEXNIK-QARZ 41 sifatida yozib qo'yildi: server tomonda chizish (23-qism) bilan yechiladi.
Qoida: bir paytda faqat bitta komponent <title> chizsin — odatda sahifa komponenti.
3. <meta> va <link>
3.1 Ko'tariladi
<meta> va <link> ham <head> ga ko'tariladi:
import { useEffect } from "react";
export default function DishPage() {
useEffect(() => {
const tags = document.head.querySelectorAll(
"meta[name=description], link[rel=canonical]",
);
for (const tag of tags) console.log(tag.outerHTML);
}, []);
return (
<article>
<meta name="description" content="Bahor oshxonasining oshi" />
<link rel="canonical" href="https://example.com/taom/osh" />
<h1>Osh — 35000 so'm</h1>
</article>
);
}Konsolda:
<meta name="description" content="Bahor oshxonasining oshi">
<link rel="canonical" href="https://example.com/taom/osh">Ekranda:
Osh — 35000 so'mBu — SEO meta teglari ni sahifa komponentining o'zida yozish. Taom sahifasi o'z tavsifi va kanonik manzilini o'zi biladi.
Bitta muhim cheklov: brauzerdagi React bu teglarni JavaScript ishlagandan keyin qo'yadi. Google bot JavaScript'ni ko'pincha bajaradi, lekin Telegram yoki Facebook havola ko'rinishini yasovchi botlar — yo'q. Ular faqat serverdan kelgan HTML'ni o'qiydi. Shuning uchun SEO va Open Graph uchun metadata serverda chizilishi kerak (Metadata API). Bugungi usul — brauzer ilovalari va server bilan birga ishlash uchun asos.
<meta itemProp> istisno: u ko'tarilmaydi, joyida qoladi — sahifa ichidagi tuzilgan ma'lumot uchun.
3.2 Stylesheet va precedence
<link rel="stylesheet"> ga precedence prop'ini bersangiz, React u bilan uch ish qiladi:
function MapWidget() {
return (
<>
{/* stil yuklanmaguncha MapWidget ko'rsatilmaydi */}
<link
rel="stylesheet"
href="/xarita.css"
precedence="default"
/>
<div className="xarita">…</div>
</>
);
}- Ko'taradi va tartiblaydi. Stil
<head>ga qo'yiladi.precedence— guruh nomi ("reset","default","high"kabi o'zingiz tanlaysiz). Guruhlar birinchi uchragan tartibda, guruh ichidagilar — birga. Kaskadda keyingisi ustun (Kaskad) — tartib muhim. - Takrorlamaydi. O'nta
MapWidget— bitta<link>: Reacthrefbo'yicha taniydi. - Kutadi. Stil yuklanmaguncha komponent to'xtaydi (suspend) — eng yaqin Suspense fallback'i ko'rinadi. Shunda foydalanuvchi stilsiz, "yalang'och" HTML'ni bir lahza ko'rmaydi (FOUC — Flash Of Unstyled Content).
precedence siz <link rel="stylesheet"> esa oddiy element kabi joyida chiziladi — kutish ham, takrorlamaslik ham yo'q.
Bu blok nocheck: saytdagi «Ishga tushir» oynasida haqiqiy stil fayli yo'q — React yuklanishni abadiy kutardi.
3.3 <script async> — bir marta
import { useEffect } from "react";
function MapWidget() {
return (
<div>
<script async src="https://example.com/xarita.js" />
);
}
export default function App() {
useEffect(() => {
const scripts = document.querySelectorAll("script[src]");
for (const s of scripts) {
console.log(s.parentElement.tagName, s.getAttribute("src"));
}
}, []);
return (
);
}Konsolda:
HEAD https://example.com/xarita.jsEkranda:
Filial xaritasi
Filial xaritasiIkki MapWidget — bitta <script>, va u <head> da. Har komponent o'ziga kerak skriptni o'zi e'lon qiladi, React esa takrorni olib tashlaydi. Bu faqat async skriptlarga tegishli: oddiy (async siz) <script> joyida qoladi va React uni bajarmaydi ham.
Tekshirib ko'ring:
<title>Savat: {count} ta</title>nega bo'sh sarlavha beradi va qanday tuzatiladi?
Javob
JSX'da Savat: {count} ta — uchta bola (satr, son, satr), ya'ni massiv. <title> faqat bitta satr yoki son qabul qiladi, massivda sarlavha bo'sh qoladi. Tuzatish — bitta satrga birlashtirish: <title>{Savat: ${count} ta}</title>.
4. Resurs maslahatlari — react-dom API'lari
4.1 To'rt funksiya
Resurs maslahatlari darsida HTML'dagi <link rel="preconnect">, <link rel="preload"> ni ko'rgan edik. React 19 ularni funksiya qilib berdi — react-dom dan:
import { useEffect } from "react";
import { preconnect, prefetchDNS, preinit, preload } from "react-dom";
export default function App() {
prefetchDNS("https://cdn.example.com");
preconnect("https://api.example.com");
preload("https://example.com/shrift.woff2", {
as: "font",
type: "font/woff2",
crossOrigin: "",
});
preinit("https://example.com/xarita.js", { as: "script" });
useEffect(() => {
const tags = document.head.querySelectorAll("link, script[src]");
for (const tag of tags) console.log(tag.outerHTML);
}, []);
return <h1>Filiallar</h1>;
}Konsolda:
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="preconnect" href="https://api.example.com">
<link rel="preload" href="https://example.com/shrift.woff2" as="font" crossorigin="" type="font/woff2">
<script src="https://example.com/xarita.js" async=""></script>Ekranda:
FiliallarHar funksiya <head> ga bitta teg qo'ydi. Ular "kuchli" lik tartibida:
| Funksiya | Brauzerga nima deydi | Qachon |
|---|---|---|
prefetchDNS(url) |
"bu domen manzilini (IP) oldindan top" | ehtimol kerak bo'ladigan boshqa domen |
preconnect(url) |
"DNS + ulanish + TLS — hammasini oldindan" | aniq kerak bo'ladigan boshqa domen |
preload(url, { as }) |
"faylni yuklab qo'y, lekin hali ishlatma" | shrift, rasm, stil — tez orada kerak |
preinit(url, { as }) |
"yukla va ishga tushir" (script, style) | darhol kerak skript yoki stil |
preloadModule va preinitModule ham bor — ES modul skriptlari uchun (<link rel="modulepreload">). preinit bilan qo'shilgan skript — async, ya'ni HTML tahlilini to'xtatmaydi.
4.2 Qayerda chaqiriladi
Bu funksiyalar — ikki joyda:
- Render paytida (yuqoridagi kabi) — komponent chizilishi bilan maslahat beriladi. Ular sof emasdek ko'rinadi, lekin React ularni "e'lon" deb biladi: takror chaqiruv — bitta teg. StrictMode'da ikki marta chizilsa ham, teg bitta.
- Hodisa ishlovchisida — "foydalanuvchi bosmoqchi" degan signalda. lazy darsidagi hover preload'ning rasm, shrift varianti.
import { useEffect, useState } from "react";
import { preload } from "react-dom";
const PHOTO = "https://example.com/rasm/osh-katta.webp";
export default function App() {
const [open, setOpen] = useState(false);
useEffect(() => {
const links = document.head.querySelectorAll("link[rel=preload]");
console.log("preload teglari:", links.length);
});
return (
<div>
<button
onPointerEnter={() => preload(PHOTO, { as: "image" })}
onClick={() => {
// takror — teg qo'shilmaydi
preload(PHOTO, { as: "image" });
setOpen(true);
}}
>
Osh
</button>
{open && <p>Katta rasm ochildi</p>}
</div>
);
}Konsolda:
preload teglari: 0
preload teglari: 1Ekranda:
Osh
Katta rasm ochildiSinov vositasida "ustiga kelish" yo'q, shuning uchun preload faqat bosishda chaqirildi. Haqiqiy brauzerda onPointerEnter birinchi bo'ladi, bosishdagi ikkinchi chaqiruv esa takror — teg baribir bitta.
4.3 Maslahat — bepul emas
Har preload — tarmoq so'rovi, har preconnect — ochiq ulanish (brauzer uni ~10 soniyadan keyin yopadi). Kerak bo'lmagan resursni oldindan yuklash — kerakli resursdan tarmoq kengligini tortib olish. Chrome hatto ogohlantiradi: "preload qilingan, lekin bir necha soniya ichida ishlatilmadi". Qoida: maslahatni o'lchab qo'shing — keyingi bo'limdagi kabi.
5. Vazifalar qadami: sarlavhada qolganlar soni (holat 12)
5.1 Bitta qator
App.tsx ga — kanondan aynan (izoh qatorlari telefon uchun qayta bo'lingan):
{/* 18/#12: hujjat sarlavhasi komponentdan — React 19 uni
<head> ga ko'taradi (hoisting). Tabda nechta vazifa qolgani
ko'rinadi */}
<title>{`(${qoldi}) Vazifalar — kichik vazifalar ro'yxati`}</title>qoldi — App'da bor edi (hisob satri uchun). U optimistik ro'yxatdan hisoblanadi (useOptimistic), shuning uchun katak bosilsa — sarlavha ham darhol. Haqiqiy Chrome'da (e2e-18, natija-18-12.txt):
✅ title: qolganlar soni; <head> da 2 ta (React'niki birinchi, index.html dagi — JS'siz zaxira): ["(2) Vazifalar — kichik vazifalar ro'yxati",2]
✅ title: katak bosilgach — darhol (optimistik ro'yxatdan): "(1) Vazifalar — kichik vazifalar ro'yxati"5.2 preconnect — o'lchandi va kirmadi
vazifalar ochilishi bilan «Bahor» API'siga so'rov yuboradi. API — boshqa domen. Tabiiy fikr: "preconnect bilan ulanishni oldindan ochamiz — birinchi so'rov tezlashadi". Kanonni qurishda uch variant o'lchandi (natijalar/12-preconnect.txt, 7 martadan, birinchi GET davomiyligi):
| Variant | Birinchi GET (mediana) |
|---|---|
| maslahatsiz | 34 ms |
React preconnect() |
31 ms |
statik <link rel="preconnect"> (index.html da) |
30 ms |
- Maslahatsiz34 ms
- React preconnect()31 ms
- Statik link30 ms
Manba: vazifalar kanoni: natijalar/12-preconnect.txt (Chrome 155)
Farq 3–4 ms — bir o'lchovdan ikkinchisigacha bo'lgan tebranish (masalan, 75 dan 101 ms gacha boshlanish vaqti) ichida. Sabab: bu so'rov kritik yo'lda emas. Ro'yxat localStorage keshidan darhol chiziladi, server javobi esa keyin, fonda keladi. 3 ms ni foydalanuvchi sezmaydi. Qaror: kirmadi — keraksiz kod qo'shilmadi.
Bu — darsning asosiy saboqi: preconnect "tezlashtiradi" degan umumiy gap emas, o'lchov. Agar sahifa API javobini kutib turganda chizilganda (kesh yo'q), natija boshqacha bo'lishi mumkin edi.
5.3 Commit
git switch -c feat/sarlavha
git add -A
git commitCommit (kanon): feat: <title> komponentdan — qolgan vazifalar soni bilan. Tekshiruvlar: Vitest Tests 39 passed (39) (+1), node:test 163, lint, format, tip — toza. Brauzer — 159/159, e2e-18 — 36/36. Diff: 2 fayl, +19.
6. Ko'p uchraydigan xatolar
| Belgi | Sabab | Davosi |
|---|---|---|
| tab sarlavhasi bo'sh | <title> ichida bir nechta bola (massiv) |
bitta satr: {… ${x} …} |
| sarlavha boshqa sahifanikicha | ikki komponent <title> chizadi |
bir paytda bittasi — sahifa komponenti |
| Telegram havola ko'rinishida tavsif yo'q | metadata brauzerda, bot JS bajarmaydi | serverda chizish (Metadata API) |
| stil ikki marta yuklanadi | precedence siz <link> |
precedence="…" |
| stilsiz HTML bir lahza ko'rinadi | stil keyin keldi | precedence + Suspense |
preload ... was not used within a few seconds |
keraksiz preload | o'lchang, olib tashlang |
| skript ikki marta ishladi | createElement("script") ikki joyda |
<script async src> yoki preinit |
7. Mashqlar
Mashqlar kurs/mashqlar/18/12-metadata/ da. Har yechimni «Ishga tushir» bilan sinang.
1-mashq (oson): qaysi funksiya?
Har holat uchun prefetchDNS, preconnect, preload yoki preinit:
- Sahifada albatta ishlatiladigan va darhol ishga tushishi kerak bo'lgan to'lov skripti.
- Taom kartasiga sichqoncha kelganda — uning katta rasmi.
- Sahifa ochilishi bilan aniq so'rov yuboriladigan boshqa domendagi API.
- Ehtimol bosiladigan "Instagram'da ko'rish" havolasining domeni.
Yechim
- preinit — yuklash va ishga tushirish (skript).
- preload — fayl tez orada kerak, lekin hali ishlatilmaydi.
- preconnect — domen aniq kerak: DNS, ulanish va TLS oldindan.
- prefetchDNS — faqat "ehtimol": eng arzon maslahat.
2-mashq (o'rta): savat sarlavhada
Savatdagi taomlar soni brauzer tabida ko'rinsin: "Savat (2) — Bahor". Hozir sarlavha bo'sh chiqyapti. Tuzating. Ishora: «Tuzoq: sarlavha bo'sh» bo'limi.
import { useEffect, useState } from "react";
export default function App() {
const [count, setCount] = useState(1);
useEffect(() => {
console.log("tab:", JSON.stringify(document.title));
});
return (
<main>
<title>Savat ({count}) — Bahor</title>
<button onClick={() => setCount(count + 1)}>
Osh qo'shish
</button>
</main>
);
}Konsolda:
tab: ""
tab: ""Yechim
import { useEffect, useState } from "react";
export default function App() {
const [count, setCount] = useState(1);
useEffect(() => {
console.log("tab:", JSON.stringify(document.title));
});
return (
<main>
<title>{`Savat (${count}) — Bahor`}</title>
<button onClick={() => setCount(count + 1)}>
Osh qo'shish
</button>
</main>
);
}Konsolda:
tab: "Savat (1) — Bahor"
tab: "Savat (2) — Bahor"Shablon satri uch bo'lakni bitta satrga birlashtirdi — <title> endi bitta bola oladi. Sarlavha state'dan chiziladi va har bosishda yangilanadi.
3-mashq (qiyin): sahifa komponenti o'z metadatasini yozadi
Ikki sahifa: «Osh» va «Manti». Har biri o'z komponentida <title> ("Osh — Bahor") va <meta name="description"> ("Osh: guruch, go'sht, sabzi") yozsin. Tugmalar sahifani almashtiradi. Effektda document.title va description content ini konsolga chiqaring. Talab: <head> da bir paytda bitta description bo'lsin. Ishora: «Ko'tariladi» bo'limi; komponent olib tashlansa, uning teglari ham <head> dan o'chadi.
Yechim
import { useEffect, useState } from "react";
const DISHES = {
Osh: "guruch, go'sht, sabzi",
Manti: "xamir, go'sht, piyoz",
};
function DishPage({ name }) {
return (
<article>
<title>{`${name} — Bahor`}</title>
<meta name="description" content={`${name}: ${DISHES[name]}`} />
<h1>{name}</h1>
</article>
);
}
export default function App() {
const [page, setPage] = useState("Osh");
useEffect(() => {
const metas = document.head.querySelectorAll(
"meta[name=description]",
);
const content = [...metas].map((m) => m.content).join(" | ");
console.log(document.title, "/", metas.length, "ta:", content);
});
return (
<div>
<button onClick={() => setPage("Osh")}>Osh</button>{" "}
<button onClick={() => setPage("Manti")}>Manti</button>
<DishPage key={page} name={page} />
</div>
);
}Konsolda:
Osh — Bahor / 1 ta: Osh: guruch, go'sht, sabzi
Manti — Bahor / 1 ta: Manti: xamir, go'sht, piyozEkranda:
Osh Manti
MantiSahifa almashganda eski DishPage olib tashlandi (key — State'ning saqlanishi va key) va uning <title>, <meta> lari ham <head> dan o'chdi. Har paytda bittadan. Metadata sahifa bilan "yashaydi va o'ladi" — qo'lda tozalash kerak emas.
4-mashq: Vazifalar qadami
feat/sarlavha branch'ida App'ga <title> ni qo'shing. Vitest: sarlavha qolganlar soni bilan, katak bosilganda yangilanadi. Commit qiling va PR oching.
Yechim
Tekshiruv ro'yxati:
npm run dev: tab sarlavhasi "(2) Vazifalar — …"; katakni bosing — darhol "(1) …".- DevTools → Elements →
<head>: ikki<title>(React'niki birinchi) — kanonda buTEXNIK-QARZ41. - Tajriba (keyin qaytaring):
<title>({qoldi}) Vazifalar</title>deb yozing — tab sarlavhasi bo'sh qoladi; shablon satriga qaytaring. npm test— Vitest 39. Commit —feat: <title> komponentdan — qolgan vazifalar soni bilan.
8. Real ishda
- Next.js —
metadataobyekti vagenerateMetadatafunksiyasi serverda<head>ni to'ldiradi: SEO va Open Graph uchun to'g'ri yo'l (Metadata API). Bugungi<title>komponentdan — client komponentlar va SPA uchun. - react-helmet / react-helmet-async — eski loyihalarda uchraydi. React 19 da yangi kod uchun shart emas, lekin ko'chirish (React versiyasini yangilash) paytida ularni olib tashlash mumkin.
- Performance ishi —
preconnect,preload— Lighthouse tavsiyalarining tez-tez uchraydigan qismi (Lighthouse). Lekin har tavsiya o'lchov bilan tekshiriladi — bugungipreconnectkabi. - Intervyu savollari: "React 19 da
<title>ni komponentda yozsa nima bo'ladi?", "preloadvapreinitfarqi?", "stylesheetprecedencenima beradi?".
Xulosa
<title>,<meta>,<link>— komponent ichida; React ularni<head>ga ko'taradi, komponent ketsa — o'chiradi.<title>— faqat bitta satr: shablon satri bilan; aks holda bo'sh sarlavha, ogohlantirishsiz.precedenceli stylesheet — tartib, takrorsiz, yuklanmaguncha suspend;<script async>— takrorsiz.prefetchDNS<preconnect<preload<preinit— render yoki hodisada chaqiriladi, takror teg yo'q.- SEO/Open Graph uchun metadata serverda kerak — brauzerdagi React botlarga yetmaydi.
vazifalar: sarlavhada qolganlar soni (optimistik);preconnect34 → 31 ms — shovqin ichida, kirmadi.
Keyingi dars: StrictMode chuqur — dev rejimdagi ikki marta chizish va effekt sinovi nimalarni fosh qiladi.
Manbalar
- React:
<title>,<meta>,<link>,<script>— react.dev/reference/react-dom/components (2026-10 holati, React 19.3) - React: "Resource Preloading APIs" —
preload,preinit,preconnect,prefetchDNS— react.dev/reference/react-dom - React blog: "React v19" (2024-12-05) — "Support for Document Metadata", "Support for stylesheets" — react.dev/blog/2024/12/05/react-19
- MDN:
rel=preconnect,rel=preload— developer.mozilla.org/docs/Web/HTML/Attributes/rel
Izohlar (0)
Izoh yozish uchun kiring.
- Hozircha izoh yo'q. Birinchi bo'ling!