How does RenderSettings.Mode work?

Hi,

I just don’t understand how is RenderSettings.Mode supposed to work.
I have read here: Server-Side Rendering (DotVVM online docs)

If I have this


It renders like this in the browser:

And If I change it to this:


It renders to:

So essentially the same rendered output with both cases having generated the data-bind attribute and value to it.

My guess was that RenderSettings.Mode is a generally applicable feature, for all html elements and DotVVM controls that support it in the markup editor (Visual Studio 2022).

I made many tests, with img element directly outside the GridView, inside it, inside or outside the bp:Button control. Also tried RenderSettings.Mode on the parent or grandparent of img, for all or only for the uppermost parent. In all cases, I see no difference. Either Server or Client value chosen - the result appears the same.

Can you help me understand this, please.

From the doc I’ve mentioned: “The server rendering only expands text content, Literals and controls that render collections.”

So it seems that this feature has effect on very specific aspects, those mentioned. Thus, the src attribute on img remains to be rendered in a default “Client render mode” way.

We have many html elements and DotVVM controls for which we don’t need the “Client” rendering mode behavior, as we make most of our business logic and data changes on the server-side and no data-polling, but it seems that through RenderSettings.Mode we are limited.
Can we achieve the thinning of the rendered output by other means? “thinning” as in making the rendered output smaller/simpler as in the example with the src attribute from the img element - no need for coupling that with knockout, its just a simple img with a src and the change is due only on the server side.

I’m used to the way WebForms did partial updates to the html, replacing the old <img> with the new one having a new path in the src attribute.

I think I don’t understand how these small updates are working in the DotVVM / MVVM way of thinking.

So I now understand that DotVVM loads the entire rendered markup in the browser at page first load, regardless of sections / panels and gridviews being visible or not (IncludeInPage true or false). And afterwards deals only with view model data changes which are applied into the html structure by knockout who uses those data-bind attributes to know where and how to update the page from these changes arrived by fetch.

image
renders
image


image
renders
image


image
renders
image


image
renders
image

Although the RenderSettings.Mode can be applied to any control, it only affects some of them. In most cases, DotVVM tries to render both knockout data-bind and also the server-side value.

It is not possible with knockout to have both server-side and client-side rendering in foreach binding, so Repeater and GridView do either of those options, based on the RenderSettings.Mode property. Literal is also affected, I think mainly for historical/compatibility resons.

If you want to force server-only rendering, use the resource binding. If you’d want to force client-only rendering, you can use {value: _page.EvaluatingOnServer ? null : ...}

1 Like