原來在 Vue、React 頁面中管理 <head> 標(biāo)簽這么簡單！
單頁應(yīng)用（SPA）以其出色的用戶體驗和流暢的頁面切換效果在現(xiàn)代Web開發(fā)中備受青睞。然而，與傳統(tǒng)的多頁應(yīng)用相比，SPA 在頁面結(jié)構(gòu)和資源管理上存在一些獨特的挑戰(zhàn)。
其中一個常見的問題是如何在 SPA 中高效地管理頁面的 <head> 標(biāo)簽，包括動態(tài)設(shè)置頁面標(biāo)題、元信息、樣式表鏈接等。本文就來看看如何在 Vue 和 React 項目中更加簡單、高效的管理 <head> 標(biāo)簽！
前言
React 和 Vue 主要被用于構(gòu)建單頁應(yīng)用。在單頁應(yīng)用中，所有頁面或視圖實際上都是在一個單一的HTML頁面上動態(tài)渲染的，而不是像傳統(tǒng)多頁應(yīng)用那樣通過服務(wù)器加載不同的HTML頁面。因此，不能簡單地在每個HTML頁面上靜態(tài)地設(shè)置<head>標(biāo)簽，因為這些標(biāo)簽是共享的，且需要動態(tài)地根據(jù)當(dāng)前顯示的頁面或視圖進(jìn)行更新。
目前，Vue 和 React 等前端框架都是不支持的為每個頁面添加 <head> 標(biāo)簽的，需要借助第三方工具庫來動態(tài)地管理單頁應(yīng)用中的<head>標(biāo)簽。這些庫允許在組件級別定義和更新標(biāo)簽的內(nèi)容，當(dāng)組件掛載、更新或卸載時，它們會相應(yīng)地修改DOM中的<head>標(biāo)簽。
注意：在即將到來的 React 19 中，將默認(rèn)支持在頁面中添加 <head> 標(biāo)簽。
那什么場景下需要在應(yīng)用中動態(tài)管理 <head> 標(biāo)簽?zāi)兀?/p>
- SEO優(yōu)化：搜索引擎優(yōu)化（SEO）要求每個頁面或視圖都有獨特的標(biāo)題（<title>）和描述（<meta name="description">）。當(dāng)用戶在SPA中導(dǎo)航到不同的頁面或視圖時，可能需要動態(tài)地更新這些標(biāo)簽以反映當(dāng)前頁面的內(nèi)容。
- 社交媒體分享：當(dāng)用戶分享 SPA 頁面到社交媒體平臺時，平臺通常會從頁面的標(biāo)簽中提取標(biāo)題、描述和圖片等信息來生成分享卡片。因此，可能需要為每個頁面或視圖設(shè)置不同的社交媒體元數(shù)據(jù)（如<meta property="og:title">、<meta property="og:description">和<meta property="og:image">），以便在分享時顯示正確的信息。
- CSS樣式和鏈接：在SPA中，可能需要根據(jù)當(dāng)前頁面或視圖的需求動態(tài)地加載不同的CSS樣式表或樣式鏈接。通過在中添加或刪除<link rel="stylesheet">標(biāo)簽，可以實現(xiàn)這一點。
- JavaScript腳本：與CSS類似，可能需要根據(jù)當(dāng)前頁面或視圖的需求動態(tài)地加載不同的JavaScript腳本。通過在中添加或刪除<script>標(biāo)簽，可以控制哪些腳本在當(dāng)前頁面或視圖中可用。
- 其他元數(shù)據(jù)：除了上述常見的元數(shù)據(jù)外，還有其他一些情況可能需要動態(tài)管理<head>標(biāo)簽。例如，可能需要為不同的頁面或視圖設(shè)置不同的字符集（<meta charset="UTF-8">）、視口設(shè)置（<meta name="viewport">）或移動應(yīng)用圖標(biāo)（<link rel="apple-touch-icon">）。
- 多語言支持：在國際化（i18n）和多語言支持的場景中，可能需要根據(jù)用戶選擇的語言動態(tài)地更新頁面的標(biāo)題、描述和其他元數(shù)據(jù)。
- A/B測試：在進(jìn)行A/B測試時，可能需要為不同的用戶組或流量來源顯示不同的頁面標(biāo)題、描述或樣式。通過動態(tài)管理標(biāo)簽，可以輕松地實現(xiàn)這一點。
- 跟蹤和分析：在某些情況下，可能需要在<head>標(biāo)簽中添加特定的跟蹤代碼或分析腳本（如Google Analytics的跟蹤代碼），以便收集有關(guān)用戶行為和其他關(guān)鍵指標(biāo)的數(shù)據(jù)。
Unhead
Unhead 是 unjs 工具集中的一個工具，用于管理網(wǎng)站 <head> 部分的庫，它同時支持服務(wù)端渲染（SSR）和客戶端渲染（CSR）。為了提升模塊化和靈活性，Unhead 被拆分為多個獨立的包，使開發(fā)者能夠按需選擇和使用所需的組件。核心包不依賴于任何特定框架，因此可以在任何環(huán)境中無縫運行。
此外，為了增強在特定框架下的使用體驗，Unhead 還提供了框架專用包。這些包簡化了與框架的集成，使開發(fā)者能夠更高效地利用 Unhead 的功能。
官網(wǎng)：https://unhead.unjs.io/。
React Helmet
React Helmet 是一個在創(chuàng)建 React 應(yīng)用時用來管理HTML文檔<head>部分的插件。它允許向 HTML 文檔添加額外的元素，如title、meta、link、script等，可以將Helmet看作是一個放置于組件樹頂部的特殊組件，用來管理頁面頭部。
React Helmet的特點包括：
- 支持所有有效的 <head> 標(biāo)簽：title、base、meta、link、script、noscript 和 style 標(biāo)簽。
- 支持 body、html 和 title 標(biāo)簽的屬性。
- 支持服務(wù)端渲染。
- 嵌套的組件會覆蓋重復(fù)的 <head> 變更。
- 當(dāng)在相同組件中指定時，重復(fù)的 <head> 變更會被保留（支持像 "apple-touch-icon" 這樣的標(biāo)簽）。
- 提供用于跟蹤 DOM 變更的回調(diào)函數(shù)。
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" />
</Helmet>
...
</div>
);
}
};Github：https://github.com/nfl/react-helmet
react-helmet-async
這個庫是基于 React Helmet 的一個改進(jìn)版本。<Helmet> 的使用方式保持不變，但為了實現(xiàn)更好的狀態(tài)管理，現(xiàn)在服務(wù)器和客戶端都需要使用 <HelmetProvider> 來封裝每個請求的狀態(tài)。
React Helmet 原本依賴于 react-side-effect，但考慮到它并不是線程安全的，如果在服務(wù)端進(jìn)行任何異步操作，需要一個能夠按請求封裝數(shù)據(jù)的解決方案。這個庫正是為了滿足這一需求而設(shè)計的，它確保了狀態(tài)的安全性并提高了性能。
import React from 'react';
import ReactDOM from 'react-dom';
import { Helmet, HelmetProvider } from 'react-helmet-async';
const app = (
<HelmetProvider>
<App>
<Helmet>
<title>Hello World</title>
<link rel="canonical" />
</Helmet>
<h1>Hello World</h1>
</App>
</HelmetProvider>
);
ReactDOM.hydrate(
app,
document.getElementById(‘a(chǎn)pp’)
);Github：https://github.com/staylor/react-helmet-async。
