vue-dompurify-html: Contents not rendered at server-side with nuxt.
Hello,
thanks for the great plugin!
It seems that when doing static site generation (SSG) on the server-side (I suspect it also applies for the SSR use case), any HTML injected into the dom via dompurify-html will not be present in the pre-rendered HTML.
Sure, the content will be added to the DOM after the initial page visit at hydration time, but that causes multiple layout shifts as content come into the page increasing our CLS performance metric massively, not only offering a worse experience to the users but also affecting our SEO ranking. Another (possible) SEO hit comes more directly because the original HTML is missing crucial content.
FYI I’ve already seen this closed MR https://github.com/LeSuisse/vue-dompurify-html/pull/591
Tested with vue-dompurify-html v2.5.0
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 3
- Comments: 20 (7 by maintainers)
Commits related to this issue
- Allow to specify a custom DOMPurify instance builder This make possible for server-side users (e.g. Nuxt) to instantiate DOMPurify with JSDOM. See #1917. — committed to LeSuisse/vue-dompurify-html by LeSuisse 2 years ago
- Allow to specify a custom DOMPurify instance builder This make possible for server-side users (e.g. Nuxt) to instantiate DOMPurify with JSDOM. See #1917. — committed to LeSuisse/vue-dompurify-html by LeSuisse 2 years ago
- Allow to specify a custom DOMPurify instance builder This make possible for server-side users (e.g. Nuxt) to instantiate DOMPurify with JSDOM. The README has been update to describe the setup. See ... — committed to LeSuisse/vue-dompurify-html by LeSuisse 2 years ago
- Allow to specify a custom DOMPurify instance builder This make possible for server-side users (e.g. Nuxt) to instantiate DOMPurify with JSDOM. The README has been update to describe the setup. See ... — committed to LeSuisse/vue-dompurify-html by LeSuisse 2 years ago
Running into the same issue in Nuxt 3. It would indeed be very nice to get a Nuxt 3 plugin for this. I cannot get the example above by @marcinkozaczyk to work either. Elements using the directive just turn out empty after being server-side rendered, so I’m getting lots of hydration mismatches everywhere. If I add
console.log(innerHTML)just before the return statement, I do see rendered HTML in the CLI, it’s just not inserted into the element that uses thev-dompurify-htmldirective.Might be related to this? https://github.com/vuejs/core/issues/8112
Nuxt 3 SSR support would be awesome.
@LeSuisse did you already try to get this to run in nuxt 3 when using SSR mode? It looks like the bundleRenderer is not as easily accessible anymore compared to Nuxt 2, though maybe I haven’t found the right documentation, yet. I’ll fiddle around in the next days, but I’d appreciate any information that you have. Thank you.
Thanks for the PR @serialine!
Hi,
I did some changes to expose the necessary primitive so the directive can be also used on the server side. You can see the setup here: https://github.com/LeSuisse/vue-dompurify-html/tree/vue-legacy#server-side
I will take a look to provide a Nuxt module for the v3 to make the setup easier.