Question T17124
Visible to All Users

Server Side Rendering support

created 10 months ago

Does SurveyJS support server-side rendering for apps built using Angular (and/or React)? I ran across this github issue from a few years ago and it's marked as completed, but I just wanted to confirm, as this is a hard requirement for us. Also, assuming SurveyJS components have been designed to be "server-compatible", are there any SurveyJS-specific requirements when building an app using server-side rendering?

Answers approved by surveyjs Support

created 10 months ago

Hello,

Under the "ClientOnly" directive I meant means of SSR frameworks allowing to render certain component on the client side only.
For instance the 'use client' directive of NextJS - https://nextjs.org/docs/app/building-your-application/rendering/client-components

Also, when using the "ClientOnly" directive, it sounds like it's basically shutting off server side rendering for the things that you wrap. Is that true?

Yes, exactly

Maybe a better question then would be how does SurveyJS perform in bandwidth challenged environments, e.g. on mobile devices?

Right now actual mobile devices render SurveyJS products without significant performance issues, at least nobody complained before.
We have plans (late this year or next) to make a native (probably Swift/Kotln) survey rendering library for mobile devices - we have strong feeling that this will be better than mobile HTML/JS solution.
But I can't give you any promises on this right now.

Other than perhaps search engine optimization?

As far as I know, at least Google, can process SPAs to some extent - https://support.google.com/webmasters/thread/14272290/how-does-google-index-content-for-spa-sites?hl=en
But yes, proper URLs generation is not supported by SurveyJS - Google will index first page of a survey as far as I understand.

Thanks, Serge
SurveyJS Team

    Show previous comments (5)

      Hello Mary,
      There are two parts here: Creating/loading Survey Model and rendering. We load the model at once and create SurveyJS elements (pages, panels, questions and so on, non-ui objects). We create rows in matrices and panels in dynamic panels on request. So if matrices and panel dynamics are not on the first page, we don't spend time on creating their content elements.
      The rendering is a different part. We use Angular, React, Vue or knockout frameworks to render our elements and we make our elements reactive for these frameworks. It means on changing a model (elements properties), UI elements will be re-rendered automatically.

      So, answering your question: Let's say you have a form with 300 questions on one page and you have another form with 30 pages with 10 questions per page then the JSON loading part will be the same and the rendering will be faster for the second form in 30 times average.
      However, the JSON loading/creating elements can be same for these forms, unless you don't use a lot of matrices and dynamic panels that are not located on the first page. In this case, because we create content for matrices and dynamic questions on request, the JSON loading/creating elements for the second form will significantly faster as well.

      Thank you,
      Andrew
      SurveyJS Team

        That's very helpful. Thank you!

          You are always welcome!

          Thanks, Serge
          SurveyJS Team

          created 10 months ago (modified 10 months ago)

          Hello,

          SurveyJS products are the client-side libraries. Our products heavily work with DOM and can be customized on the fly. That's why I don't see any real server-side rendering for them.
          Another case is the survey-pdf library: it can be used on the server side with small restrictions (HTML rendering).
          Summarizing: you can use SurveyJS products in applications that use server-side rendering, but they have to be wrapped with the "ClientOnly" (or something similar) directive.

          Thanks, Serge
          SurveyJS Team

            Comments (1)

              What would have to be wrapped with "ClientOnly"? Custom components? The component used to render the survey? Something else?

              Also, when using the "ClientOnly" directive, it sounds like it's basically shutting off server side rendering for the things that you wrap. Is that true?

              Maybe a better question then would be how does SurveyJS perform in bandwidth challenged environments, e.g. on mobile devices? What, if any, performance optimizations have been made? Because I believe this would be the primary reason for using server-side rendering. Other than perhaps search engine optimization?