search

jonluca / vite-typescript-ssr-react

🚀 A Vite Typescript SSR React boilerplate!
https://blog.jonlu.ca/posts/vite
342 stars 48 forks source link

Update head tags using Helmet #18

Closed tawn33y closed 1 year ago

tawn33y commented 1 year ago

I'm using react-helmet to update the Head tags but the built HTML source (ctrl + u) does not reflect this. However, if you inspect element (ctrl + shift + i) and look at the source, the head is updated well.

// server.ts
// here we only update the html, not the head tags
const { render } = await vite.ssrLoadModule(isProd ? productionBuildPath : devBuildPath);
...
const html = template.replace(`<!--app-html-->`, appHtml)

Any ideas on how to update the head tags as well?

jonluca commented 1 year ago

https://github.com/nfl/react-helmet

You should check out that library. You basically have to statically render the head in that case, and add the replacement into the html. You could call const head = Helmet.renderStatic() and then do another template.replace(, head.title.toString()), and add in app-title to index.html.

However I'd be wary of any of this - https://github.com/nfl/react-helmet/issues/216 - react helmet is inherently not thread safe, so you might run into data pollutions with this.