Server Side Rendering (SSR)

[Lee KlausParticipant]

Question for you…

I’d really like to be able to “server-side” render your components (since our application is built on NUXT, not just native VUE). Do you have any plans to make them SSR safe (even if they don’t necessarily do a “full SSR render” of sorts)?

I’d really love to just use the components and not have to worry about whether they’re getting invoked on the client side or the server side. It would have some real advantages for us… I also think it positions you more effectively for where more “serious” web sites are likely to head when it comes to more broad use of VUE – I could be wrong – VUE is pretty “young”, but it seems like a number of people are headed that direction to split up their site, make SSO easier, etc.

Thanks… Lee

[MartinParticipant]

Hello Lee,

Thank you for this feedback!
We do not have experience with NUXT.
Could you clarify what do you mean for the components to be SSR safe and do you know what would be needed for this to be achieved?
Thank you!

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Lee KlausParticipant]

Yes, certainly…

NUXT is essentially a framework that compliments Vue in order to build a “universal application”. More details can be found here: https://nuxtjs.org/

It has gained some level of traction because:

1) It renders pages the first time through on the server (not the client), and what that means is that the results returned to the client look more like “the real page”, not just links to javascript. This is primarily important because search engines like google are then more likely to accurately index your page with “real content”, not just javascript.

2) In theory, the page render can happen quicker as well, since you don’t have to wait for a bunch of javascript to download and run prior to showing some “real” content to the user.

And lastly, NUXT provides a bit of an application configuration framework where development of a more complex application is somewhat simplified through well-organized directory structures, a solid build process with webpack, etc.

So what does this mean?

1. It means that a any Vue component has to be cautious around exactly what it does during the render. If, for example, the rendering directly references the window object of a browser, it will fail on the server when NodeJS does a “server-side” render. That part of it starts to get over my head, but a lot of people are starting to write components so that they won’t error out when rendering on the server (even if perhaps the “render” is not “pretty”, etc.

To work with JQ components and NUXT, here’s what you currently have to do:

1. When using a component, wrap the component in <no-ssr> tags in the the page that you are constructing. This tells NUXT not to render that component on the server side.
2. When requiring the component, you have to bind to the component on the client side, and intentionally avoid binding on the server where it will cause problems. Here’s how I deal with that:

<script>
let JqxButton = null;
let JqxSplitter = null;
let JqxTree = null;
let JqxMenu = null;

if (process.client) {
JqxButton = require(“jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue”)
.default;
JqxSplitter = require(“jqwidgets-scripts/jqwidgets-vue/vue_jqxsplitter.vue”)
.default;
JqxTree = require(“jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue”)
.default;
JqxMenu = require(“jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue”)
.default;
}

export default {
components: {
JqxButton,
JqxSplitter,
JqxTree,
JqxMenu
}, …

Hopefully this helps – I know it can get complicated quickly…

Lee

[MartinParticipant]

Hello Lee,

Thank you for the detailed description and explanation!

However, I think that rendering the components on the server would not be possible because, as you have mentioned, if the rendering directly references the window object of a browser, it will fail on the server.
jQWidgets is a user interface library. It is written in Javascript and it works with DOM objects, creates them, adds them and sets them up using the document object.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Lee KlausParticipant]

Yes, I do understand that… It’s unclear to me as to exactly what some of the UI component providers do to avoid having problems. Ie., Veutify is a good example – provides a lot of UI components, but will still work on the server side.

Perhaps the architecture of what they have done is somewhat different, given that they don’t have the history that you have with your library…

It’s just a thought – not a huge deal, but…. wanted to check.

[Author]

Posts