Is server side rendering is possible?

[balazsnemeth]

Hi,

I integrated this component into a NextJS app, and when I reload it from the server, this is rendered:

After further debug, it seems the class "progressCircleBar" is not applied on the circle. Also, checking the node modules bundle, I see rollup created a styleInject fn which has a if (!css || typeof document === 'undefined') { return; } return option. So I bet the current bounding does not support SSR, am I correct?

Do you have any hint if I fork the repo, then how can I manage to support SSR to push a Pull Request about this?

[prasannamestha]

Yeah - as the svg's are drawn to occupy the parent container's width - I guess you could simply set a static width in src/circle.js. I'm not sure but I guess this might solve your problem.

[balazsnemeth]

Unfortunately, it does not solve it, these stylings are also missing:

.progressCircleBar {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

[prasannamestha]

In this case I'm gonna run this in NextJs and try to come up with a solution tonight. Until then can you too try to see if you can get a solution to this problem please?