[{"data":1,"prerenderedAt":611},["ShallowReactive",2],{"snippet-\u002Fsnippets\u002Fprefetch-links":3},{"id":4,"title":5,"body":6,"description":601,"draft":602,"extension":603,"lastModified":604,"meta":605,"navigation":163,"path":606,"seo":607,"stem":608,"tags":609,"__hash__":610},"snippets\u002Fsnippets\u002Fprefetch-links.md","Prefetch Links on hover",{"type":7,"value":8,"toc":598},"minimark",[9,510,515,594],[10,11,16],"pre",{"className":12,"code":13,"language":14,"meta":15,"style":15},"language-ts shiki shiki-themes github-dark","export const usePrefetch = (\n  { selector, as }: { selector: string; as: string } = {\n    selector: \"a[data-prefetch]\",\n    as: \"document\",\n  }\n) => {\n  window.prefetchedLinks ??= new Set\u003Cstring>();\n\n  const createPrefetchLink = (url: string) => {\n    const link = document.createElement(\"link\");\n\n    link.href = url;\n    link.rel = \"prefetch\";\n    link.as = as;\n    return link;\n  };\n\n  const onHover = (e: Event) => {\n    const link = e.target as HTMLAnchorElement;\n\n    if (!window.prefetchedLinks.has(link.href)) {\n      window.prefetchedLinks.add(link.href);\n      const linkEl = createPrefetchLink(link.href);\n      document.head.appendChild(linkEl);\n    }\n  };\n\n  const prefetchLinks = Array.from(document.querySelectorAll(selector));\n  for (let link of prefetchLinks) {\n    link.addEventListener(\"mouseenter\", onHover, { once: true, passive: true });\n    link.addEventListener(\"touchstart\", onHover, { once: true, passive: true });\n  }\n};\n","ts","",[17,18,19,42,93,106,117,123,134,158,165,192,218,223,234,248,259,268,274,279,305,324,329,349,361,376,388,394,399,404,429,449,477,499,504],"code",{"__ignoreMap":15},[20,21,24,28,31,35,38],"span",{"class":22,"line":23},"line",1,[20,25,27],{"class":26},"snl16","export",[20,29,30],{"class":26}," const",[20,32,34],{"class":33},"svObZ"," usePrefetch",[20,36,37],{"class":26}," =",[20,39,41],{"class":40},"s95oV"," (\n",[20,43,45,48,52,55,58,61,64,67,69,71,75,78,80,82,84,87,90],{"class":22,"line":44},2,[20,46,47],{"class":40},"  { ",[20,49,51],{"class":50},"s9osk","selector",[20,53,54],{"class":40},", ",[20,56,57],{"class":50},"as",[20,59,60],{"class":40}," }",[20,62,63],{"class":26},":",[20,65,66],{"class":40}," { ",[20,68,51],{"class":50},[20,70,63],{"class":26},[20,72,74],{"class":73},"sDLfK"," string",[20,76,77],{"class":40},"; ",[20,79,57],{"class":50},[20,81,63],{"class":26},[20,83,74],{"class":73},[20,85,86],{"class":40}," } ",[20,88,89],{"class":26},"=",[20,91,92],{"class":40}," {\n",[20,94,96,99,103],{"class":22,"line":95},3,[20,97,98],{"class":40},"    selector: ",[20,100,102],{"class":101},"sU2Wk","\"a[data-prefetch]\"",[20,104,105],{"class":40},",\n",[20,107,109,112,115],{"class":22,"line":108},4,[20,110,111],{"class":40},"    as: ",[20,113,114],{"class":101},"\"document\"",[20,116,105],{"class":40},[20,118,120],{"class":22,"line":119},5,[20,121,122],{"class":40},"  }\n",[20,124,126,129,132],{"class":22,"line":125},6,[20,127,128],{"class":40},") ",[20,130,131],{"class":26},"=>",[20,133,92],{"class":40},[20,135,137,140,143,146,149,152,155],{"class":22,"line":136},7,[20,138,139],{"class":40},"  window.prefetchedLinks ",[20,141,142],{"class":26},"??=",[20,144,145],{"class":26}," new",[20,147,148],{"class":33}," Set",[20,150,151],{"class":40},"\u003C",[20,153,154],{"class":73},"string",[20,156,157],{"class":40},">();\n",[20,159,161],{"class":22,"line":160},8,[20,162,164],{"emptyLinePlaceholder":163},true,"\n",[20,166,168,171,174,176,179,182,184,186,188,190],{"class":22,"line":167},9,[20,169,170],{"class":26},"  const",[20,172,173],{"class":33}," createPrefetchLink",[20,175,37],{"class":26},[20,177,178],{"class":40}," (",[20,180,181],{"class":50},"url",[20,183,63],{"class":26},[20,185,74],{"class":73},[20,187,128],{"class":40},[20,189,131],{"class":26},[20,191,92],{"class":40},[20,193,195,198,201,203,206,209,212,215],{"class":22,"line":194},10,[20,196,197],{"class":26},"    const",[20,199,200],{"class":73}," link",[20,202,37],{"class":26},[20,204,205],{"class":40}," document.",[20,207,208],{"class":33},"createElement",[20,210,211],{"class":40},"(",[20,213,214],{"class":101},"\"link\"",[20,216,217],{"class":40},");\n",[20,219,221],{"class":22,"line":220},11,[20,222,164],{"emptyLinePlaceholder":163},[20,224,226,229,231],{"class":22,"line":225},12,[20,227,228],{"class":40},"    link.href ",[20,230,89],{"class":26},[20,232,233],{"class":40}," url;\n",[20,235,237,240,242,245],{"class":22,"line":236},13,[20,238,239],{"class":40},"    link.rel ",[20,241,89],{"class":26},[20,243,244],{"class":101}," \"prefetch\"",[20,246,247],{"class":40},";\n",[20,249,251,254,256],{"class":22,"line":250},14,[20,252,253],{"class":40},"    link.as ",[20,255,89],{"class":26},[20,257,258],{"class":40}," as;\n",[20,260,262,265],{"class":22,"line":261},15,[20,263,264],{"class":26},"    return",[20,266,267],{"class":40}," link;\n",[20,269,271],{"class":22,"line":270},16,[20,272,273],{"class":40},"  };\n",[20,275,277],{"class":22,"line":276},17,[20,278,164],{"emptyLinePlaceholder":163},[20,280,282,284,287,289,291,294,296,299,301,303],{"class":22,"line":281},18,[20,283,170],{"class":26},[20,285,286],{"class":33}," onHover",[20,288,37],{"class":26},[20,290,178],{"class":40},[20,292,293],{"class":50},"e",[20,295,63],{"class":26},[20,297,298],{"class":33}," Event",[20,300,128],{"class":40},[20,302,131],{"class":26},[20,304,92],{"class":40},[20,306,308,310,312,314,317,319,322],{"class":22,"line":307},19,[20,309,197],{"class":26},[20,311,200],{"class":73},[20,313,37],{"class":26},[20,315,316],{"class":40}," e.target ",[20,318,57],{"class":26},[20,320,321],{"class":33}," HTMLAnchorElement",[20,323,247],{"class":40},[20,325,327],{"class":22,"line":326},20,[20,328,164],{"emptyLinePlaceholder":163},[20,330,332,335,337,340,343,346],{"class":22,"line":331},21,[20,333,334],{"class":26},"    if",[20,336,178],{"class":40},[20,338,339],{"class":26},"!",[20,341,342],{"class":40},"window.prefetchedLinks.",[20,344,345],{"class":33},"has",[20,347,348],{"class":40},"(link.href)) {\n",[20,350,352,355,358],{"class":22,"line":351},22,[20,353,354],{"class":40},"      window.prefetchedLinks.",[20,356,357],{"class":33},"add",[20,359,360],{"class":40},"(link.href);\n",[20,362,364,367,370,372,374],{"class":22,"line":363},23,[20,365,366],{"class":26},"      const",[20,368,369],{"class":73}," linkEl",[20,371,37],{"class":26},[20,373,173],{"class":33},[20,375,360],{"class":40},[20,377,379,382,385],{"class":22,"line":378},24,[20,380,381],{"class":40},"      document.head.",[20,383,384],{"class":33},"appendChild",[20,386,387],{"class":40},"(linkEl);\n",[20,389,391],{"class":22,"line":390},25,[20,392,393],{"class":40},"    }\n",[20,395,397],{"class":22,"line":396},26,[20,398,273],{"class":40},[20,400,402],{"class":22,"line":401},27,[20,403,164],{"emptyLinePlaceholder":163},[20,405,407,409,412,414,417,420,423,426],{"class":22,"line":406},28,[20,408,170],{"class":26},[20,410,411],{"class":73}," prefetchLinks",[20,413,37],{"class":26},[20,415,416],{"class":40}," Array.",[20,418,419],{"class":33},"from",[20,421,422],{"class":40},"(document.",[20,424,425],{"class":33},"querySelectorAll",[20,427,428],{"class":40},"(selector));\n",[20,430,432,435,437,440,443,446],{"class":22,"line":431},29,[20,433,434],{"class":26},"  for",[20,436,178],{"class":40},[20,438,439],{"class":26},"let",[20,441,442],{"class":40}," link ",[20,444,445],{"class":26},"of",[20,447,448],{"class":40}," prefetchLinks) {\n",[20,450,452,455,458,460,463,466,469,472,474],{"class":22,"line":451},30,[20,453,454],{"class":40},"    link.",[20,456,457],{"class":33},"addEventListener",[20,459,211],{"class":40},[20,461,462],{"class":101},"\"mouseenter\"",[20,464,465],{"class":40},", onHover, { once: ",[20,467,468],{"class":73},"true",[20,470,471],{"class":40},", passive: ",[20,473,468],{"class":73},[20,475,476],{"class":40}," });\n",[20,478,480,482,484,486,489,491,493,495,497],{"class":22,"line":479},31,[20,481,454],{"class":40},[20,483,457],{"class":33},[20,485,211],{"class":40},[20,487,488],{"class":101},"\"touchstart\"",[20,490,465],{"class":40},[20,492,468],{"class":73},[20,494,471],{"class":40},[20,496,468],{"class":73},[20,498,476],{"class":40},[20,500,502],{"class":22,"line":501},32,[20,503,122],{"class":40},[20,505,507],{"class":22,"line":506},33,[20,508,509],{"class":40},"};\n",[511,512,514],"h2",{"id":513},"usage","Usage",[10,516,520],{"className":517,"code":518,"language":519,"meta":15,"style":15},"language-html shiki shiki-themes github-dark","\u003Ca href=\"\u002Fsome-path\" data-prefetch>...\u003C\u002Fa>\n\u003Cscript>\n  import { usePrefetch } from \"...\"; \u002F\u002F make sure you have a build step since you can't import TS code :)\n  usePrefetch();\n\u003C\u002Fscript>\n","html",[17,521,522,549,558,577,585],{"__ignoreMap":15},[20,523,524,526,530,533,535,538,541,544,546],{"class":22,"line":23},[20,525,151],{"class":40},[20,527,529],{"class":528},"s4JwU","a",[20,531,532],{"class":33}," href",[20,534,89],{"class":40},[20,536,537],{"class":101},"\"\u002Fsome-path\"",[20,539,540],{"class":33}," data-prefetch",[20,542,543],{"class":40},">...\u003C\u002F",[20,545,529],{"class":528},[20,547,548],{"class":40},">\n",[20,550,551,553,556],{"class":22,"line":44},[20,552,151],{"class":40},[20,554,555],{"class":528},"script",[20,557,548],{"class":40},[20,559,560,563,566,568,571,573],{"class":22,"line":95},[20,561,562],{"class":26},"  import",[20,564,565],{"class":40}," { usePrefetch } ",[20,567,419],{"class":26},[20,569,570],{"class":101}," \"...\"",[20,572,77],{"class":40},[20,574,576],{"class":575},"sAwPA","\u002F\u002F make sure you have a build step since you can't import TS code :)\n",[20,578,579,582],{"class":22,"line":108},[20,580,581],{"class":33},"  usePrefetch",[20,583,584],{"class":40},"();\n",[20,586,587,590,592],{"class":22,"line":119},[20,588,589],{"class":40},"\u003C\u002F",[20,591,555],{"class":528},[20,593,548],{"class":40},[595,596,597],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":15,"searchDepth":44,"depth":44,"links":599},[600],{"id":513,"depth":44,"text":514},"Prefetch a page before the visitor clicks it. This TypeScript helper watches hover on any link marked data-prefetch, then appends a rel=prefetch tag once per URL.",false,"md","2026-08-29T17:42:32+07:00",{},"\u002Fsnippets\u002Fprefetch-links",{"title":5,"description":601},"snippets\u002Fprefetch-links","typescript, dom, performance","nmw_PLr3Nl59ylNJhXSEFoE28PgAEJFzJXYx6klUc6Q",1788101292515]