<head> Not hoisted and merged, docs aren't clear #1378
Description
What version of astro are you using?
1.0.6
Are you using an SSR adapter? If so, which one?
No
What package manager are you using?
npm
What operating system are you using?
macOS
Describe the Bug
I started a new project with the blog template and made the following change to HeaderLink.astro:
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
index 41e19de..dca5f77 100644
--- a/src/components/HeaderLink.astro
+++ b/src/components/HeaderLink.astro
@@ -5,6 +5,9 @@ const { href, class: className, ...props } = Astro.props as Props;
const isActive = href === Astro.url.pathname;
---
+<head>
+ <link rel="prefetch" href={href} />
+</head>
<a href={href} class:list={[className, { active: isActive }]} {...props}>
<slot />
</a>Looking at withastro/astro#2128 and related issues it seems like this is supposed to be possible; however, this just results in <head> elements being rendered into the body. The docs say the following:
Modifying
<head>In JSX, you may see special libraries used to help you manage a page’s tag. This is not necessary in Astro. Write and its contents in your top-level layout.
This isn't very clear. The title of the section seems to suggest that modifying <head> is possible; however, the wording seems to suggest that there is no special hoisting or modifying of <head>. So I don't understand why there's a comparison to JSX libraries for managing the <head> element in JSX, because what Astro appears to be doing here also works just fine in JSX with no additional libraries (see the many SSR React examples for rendering entire pages).
As an aside, I am aware of @astrojs/prefetch and astro-spa, but I was looking to implement something simpler by just having my header links put a <link rel="prefetch" in my page's <head>.
Link to Minimal Reproducible Example
https://codesandbox.io/s/happy-wave-8d8mm6?file=%2Fsrc%2Fcomponents%2FHeaderLink.astro
Participation
- I am willing to submit a pull request for this issue.