About Client-Side Rendering

Before a view's marks and data are displayed in a client web browser, they are retrieved, interpreted, and rendered. Tableau Server can perform this process in the client web browser or on the server. Client-side rendering is the default mode because handling the rendering and all interaction on the server can result in more network data transfer and round-trip delays. With client-side rendering, most view interactions are faster, because they are interpreted and rendered right there in the client.

Some views, however, are more efficiently rendered on the server where there's more computing power. Server-side rendering makes sense for a view that is complex to the extent that image files take up significantly less bandwidth than the data used to create the images. Also, because tablets usually have much slower performance than PCs, they can handle less view complexity. There are cases where a view opened from a PC's web browser might be client-rendered but the same view opened from a tablet's web browser is server-rendered.

Tableau Server is configured to automatically handle all of these situations using The Threshold Calculation as the trigger for rendering a view on the server instead of in the web browser. As the administrator, you can test or fine tune this setting for both PCs and tablets. See the topics below for more information.

Requirements

• Supported browsers: Client-side rendering is supported in Internet Explorer version 9.0 or higher, Firefox, Chrome, and Safari. All of these web browsers include the HTML 5 <canvas> element, which is used by client-side rendering.
• Polygons and the page history feature: If a view uses polygons or the page history feature, server-side rendering is performed, even if client-side rendering is otherwise enabled.

The Threshold Calculation

When client-side rendering is enabled, Tableau Server uses a calculation to determine the view's complexity. If the complexity value exceeds 100 (for PC browsers) or 20 (for tablet browsers), the view is rendered on the server instead of in the web browser. Here's the calculation:

view complexity = (# of marks) + 3(# of headers) + 3(# of annotations) + 3(# of reference lines) + 6(# of unique custom shapes)

For example, if you have a view with 2,000 marks, 150 headers (you can sometimes determine this by adding the number of rows and columns in a view), 1 annotation, and 1 reference line, your equation would be:

2,000 + 3(150) + 3(1) + 3(1) = 2,456

Now take the current threshold value and divide it by 100, then multiply it by 5,000 (dividing the threshold by 100 is a normalization and multiplying by 5,000 is Tableau's scaling factor). Assuming a current threshold value of 100, the equation would be as follows:

100/100 * 5,000 = 5,000

Compare the two sums. Knowing that 5,000 represents a complexity of 100, you can see that 2,456 represents about half the complexity (49). Therefore, to force server-side rendering for this particular view on a PC browser, you would need to set that threshold to 48. Keep in mind that interactions such as filtering may change the complexity of the view, and a session may switch rendering modes whenever the view's complexity changes.

Note: "Unique custom shapes" represents different images. You can have 2000 marks with one unique custom shape, and that part of the calculation would be 6 * 1. With 500 marks, each with a different custom shape, that part of the calculation would be 6 * 500.

See the topics below for details on how to test and configure client-side rendering.

Test with the URL Parameter

Tableau Server is configured to perform client-side rendering by default, as long as the requirements are met. To test server-side rendering on a session basis, type ?:render=false at the end of the view's URL. For example:

http://localhost/views/Supplies/MyView?:render=false

If client-side rendering is disabled on Tableau Server, enter ?:render=true to enable it for the session:

http://localhost/views/Supplies/MyView?:render=true

You can also test particular complexity thresholds on individual views to see if it’s appropriate to adjust the server-wide threshold for your server and network conditions. For example, you may find that lower complexity (such as 80) or higher complexity (such as 120) tipping points result in more responsiveness to user interactions. To test a threshold, you can keep the server’s default configuration (client-side-rendering enabled) and enter the test threshold number at the end of the view's URL. For example:

http://localhost/views/Supplies/MyView?:render=80