render `end` value in HTML during SSR

Question

render `end` value in HTML during SSR

Closed this issue 3 years ago · 7 comments

ksaitor commented 3 years ago

Problem:

in SSR generated HTML use-count-up renders 0, instead of end value, which has adverse effects for SEO.

Example

<CountUp isCounting end={500} /> will result in 0 in HTML.

Expected:

<CountUp isCounting end={500} /> should result in 500 in HTML.

And then on hydration start animating from 0.

Using next.js@12. Likely the same behavior with previous versions as well.

Answer 1 · 2021-10-28T13:56:41.000Z

Hey @ksaitor, I will investigate it and come back to you. Can you meanwhile test it with version 2.x.x? I just want to know if it is a bug that was introduced in version 3.

Answer 2 · 2021-10-29T03:55:06.000Z

just tested on use-count-up@2 — same problem.

Answer 3 · 2021-10-29T11:36:08.000Z

I see now, this was actually never implemented in the component. As far as I know, the only way to know that the component is rendered on the server is to check if window is present. So one way to make it work for you is this start={typeof window === 'undefined' ? end : 0}.

Is this going to work you?

Answer 4 · 2021-11-01T02:25:16.000Z

Thank you. Yeah, that works - start={typeof window === 'undefined' ? end : 0}.

Would be nice if this was part of the package, though. Perhaps as an optional flag like ssr. I'd set it to true by default, but you know your user base better than i do :)

Imho, SEO is being hugely overlooked by react community, and it'd be great if more libraries took steps to be aware of it, hence strengthening the tech and community overall.

Answer 5 · 2021-11-01T08:00:46.000Z

I was wondering since the markup is generated on the server, do you get to see the end value for a brief moment before the animations kicks in?

I added your idea to the Feature request discussions here. Lets see how it goes and I may considering adding the feature.

Answer 6 · 2021-11-03T07:02:02.000Z

@vydimitrov it does show for a split second, but it doesn't bother me personally… imho, it's even better that when it shows 0 for a split second. 👍

Currently using start={typeof window === 'undefined' ? end : 0} and use-count-up on these pages:

Answer 7 · 2021-11-05T08:34:05.000Z

Great, it looks really good :) Thanks for sharing your work!

I am going to close this issue now and consider the feature I proposed.