How to make Survey.StylesManager.applyTheme() work on server-side rendering?

[bymoe]

I am using Next.js, Survey.StylesManager.applyTheme() doesn't work on Server-side rendering, it require the document object.

Is there any way I could apply modern theme on server? without requiring the document object?

Why this doesn't work? <Survey.Survey applyTheme={"modern"} />

[tsv2013]

The Survey.StylesManager.applyTheme() is not supposed to work with server-side rendering.

At this moment SurveyJS theming engine doesn't support server-side rendering.

Why this doesn't work? <Survey.Survey applyTheme={"modern"} /> Survey componend doen't support the applyTheme property.

[bymoe]

@tsv2013 Thank you,

Is there any way I can manually set the modern theme to be the default one? Or any way I can inject the modern theme css to just load as default with having to use the applyTheme function?

[tsv2013]

You can execute this code Survey.StylesManager.applyTheme() on the client side.

[bymoe]

I wish, Unfortunately, this is not a solution for me!

[tsv2013]

Could you share your scenario?

[bymoe]

The way that Next.js works simply they compile your page on server, When I try to apply .applyTheme there's some delay (0.5s) for the .applyTheme to happen, so at initial load the survey loads with the default theme which is really ugly till the .applyTheme takes effect.

I was wondering how .applyTheme() works, is it just adding bunch of css to the survey? If so, can I do it manually and inject the modern theme css to default one? I appreciate any help.

[tsv2013]

Is finally the page executed on client side, in a web browser?

[bymoe]

Yes

[tsv2013]

Then you can execute the Survey.StylesManager.applyTheme("modern"); on the client side before survey wil be runned. You really need to execute some code to start client side scripts.

[bymoe]

The problem is the noticeable delay before .applyTheme() takes effect.

[mpcooke3]

Did you ever get this working?

I am trying to apply the bootstrap theme client side in react after the initial contents and survey are server side rendered. I have tried calling Survey.StylesManager.applyTheme('bootstrap') from within componentDidMount but haven't yet managed to find any way to get the CSS applied. Without the SSR it is all working fine.

[santoshkaranam]

For Next JS. you need to load survey in client side like below const SurveyClient = dynamic(() => import(..//components//surveyClient), { loading: () =>

Loading...

, ssr: false, });

here the surveyClient is react function which has code const SurveyClient = (props: ISurveyProps) => { Survey.StylesManager.applyTheme('defaultV2'); const mySurvey = new Survey.Model(props.jsonData); mySurvey.showCompletedPage = true; Survey.StylesManager.applyTheme('defaultV2');

if (typeof window !== 'undefined') { window.sessionStorage.survey = mySurvey; }

if (typeof window === 'undefined') { return

Client side only

; }

return (

); };

this is working for me.