DEV Community

PuruVJ
PuruVJ

Posted on • Updated on • Originally published at puruvj.dev

Pitfalls when using Stencil Helmet during Prerendering

I assume that if you're here, you already know a little about StencilJS, if not, check out this super awesome framework.

Back story

When I was building this blog, I was trying to use Stencil Helmet to dynamically add some tags to the <head> tag, and these dynamic tags would show up in prerendered pages. You can even confirm their existence right now, by pressing Ctrl+U key combo or by manually typing view-source: behind the actual URL.

view-source:https://puruvjdev.now.sh
Enter fullscreen mode Exit fullscreen mode

So, what happened was, I made some changes in my code, and my application stopped prerendering. Just like that. It wasn't prerendering.

This wasn't acceptable. Prerendering is absolutely necessary to make a fast and SEO friendly site.

So I dug deep into my git commits, and BAM! There was the culprit, hiding right in the index.html file on the 3rd line. The glorious.....

<title>Something</title>
Enter fullscreen mode Exit fullscreen mode

Or rather, the absence of it. You see, I had deleted the title tag, so I could handle dynamic title management in my components.

The solution

Always keep the title tag in your index.html.

I just added in the title tag and everything started working.

Hope you got something out of this post.

Signing off!

Top comments (0)