question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Contents not rendered at server-side with nuxt.

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
LeSuissecommented, Oct 20, 2022

Thanks for the PR @serialine!

1reaction
LeSuissecommented, Jun 5, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Server Side Rendering - Nuxt
Server -side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it...
Read more >
NUXT - SSR - components are not being rendered server side
With Nuxt >= 2.12, you can use the fetch() hook to get & process data before the page renders. It's leveraged both in...
Read more >
Nuxt Link not serverside rendering page · Issue #10408 - GitHub
On dev when using NuxtLink to go to a page that needs server side rendered data, it does not serverside render the data....
Read more >
How To Use Server-Side Rendering with Nuxt.js | DigitalOcean
You can use the fetch method to make network calls before the page is rendered. The asyncData method is used when shaping reactive...
Read more >
Server-side rendering with Vue and Nuxt.js - LogRocket Blog
Also, instead of getting all of the content from the HTML document itself, you receive a bare-bones HTML document with a JavaScript file...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found