How Dynamic Rendering Works Using HTML And CSS?

What is Dynamic Rendering and How it Works

Dynamic rendering is a method used to optimize web pages for both users and search engines. It involves serving different versions of your web content based on the user agent, delivering pre-rendered content to search engine bots while presenting dynamic content to human users. This seamless fusion of static and dynamic content ensures blazing-fast loading speeds and enhanced user experiences.

Dynamic rendering is a helpful technique that can be used to optimize the delivery of content. In the dynamic rendering approach, the content can either be served from the UCD service or your web server. The advantage of using a web server to deliver content is that it will tend to be more reliable as redundant routing provides higher availability.

Source

In the above image, requests are routed to Renderer from crawlers, whereas user requests are normally served. However, when required, the content version is served by the dynamic renderer that suits the crawler, for example, serving a static version of the HTML. You can enable dynamic renderer for all pages by enabling it for each page.

Google has since withdrawn the recommendation. Its search documentation now states that dynamic rendering was a workaround and not a long-term solution for problems with JavaScript-generated content in search engines, and it names server-side rendering, static rendering and hydration as the replacements. Treat the technique below as a template-switching pattern for devices, not as a search indexing fix.

Dynamic Rendering of Templates with connectedCallback and LWC

Now that we know a bit about LWC and the connectedCallback method, we need to write a JS file that will provide the logic to the LWC.

First, we need to have two templates. Both of these templates will be for two different devices; mobile and desktop. They can be entirely different from each other, and if you are targeting more than two devices, you need to have that many templates ready with you.

Creating the Template

A template is a normal HTML web page that takes CSS files as input and constructs a web page. You can put that code under the template tag:

<template>
	//HTML code
</template>

Or you can also create multiple HTML files if the code is too big. If you are using the latter method, remember to import these files into the code as follows:

import { LightningElement } from 'lwc';
import MobileTemplate from './MobileTemplate.html';
import WebTemplate from './WebTemplate.html';

The above import works after Salesforce Extension Pack has been downloaded and added into your IDE. Make sure you do that to have all the libraries by your side.

With templates being designed, we just need to code a JavaScript file to make it understand which template to render on which device.

Export the Class

The class name has to be the same as the app name while using the LWC. Refer to the official documentation to understand more about that.

export default class DynamicRendering extends LightningElement

Implement the “render” function, which returns the template to render on the screen.

render() {
        return window.screen.width < 640 ? MobileTemplate : WebTemplate;
    }

The ternary operator used above will return the “MobileTemplate.html” when the screen size is less than 640 width or else “WebTemplate.html” is returned. This phenomenon can be seen in the below image:

While on the mobile screen, a different template is rendered:

Through this method, we can easily implement dynamic rendering on our web application, a website that makes desktop users and mobile users happy. But just implementing the code is not enough! The next logical step is to test the website for mobile devices and responsiveness to be assured that the website will not break on different mobile devices.

Browser Support For Dynamic Rendering

Lightning web components work through a library developed by Salesforce. The library uses JavaScript functionalities and implements its own functions on top of that. Therefore, browser support is excellent and works on all mobile and desktop browsers.

The lifecycle that the framework builds on is the custom elements API. MDN records customElements as Baseline Widely available, with support across browsers since January 2020.

There is no need to ponder over cross browser compatibility issues while working with the dynamic CSS rendering.

Can AI Crawlers Read JavaScript Rendered Templates?

No. AI crawlers read the initial HTML response and do not run the script that picks a template. Vercel's study of crawler traffic reports that none of the major AI crawlers currently render JavaScript, naming OpenAI's GPTBot and OAI-SearchBot, Anthropic's ClaudeBot and PerplexityBot.

• Initial HTML only: these crawlers index what the server returns, so markup created after page load is missing from the copy they store.
• render() runs too late: the ternary on window.screen.width executes in the browser, so a crawler that skips JavaScript reads neither the mobile template nor the web template.
• Fetched but not executed: Vercel found the ChatGPT and Claude crawlers request JavaScript files and then never execute them, so a 200 response on a bundle proves nothing about what was indexed.
• Server-side rendering: the three replacements Google names, server-side rendering, static rendering and hydration, each put the finished markup in the first response a crawler reads.
• Single responsive template: a responsive design driven by CSS media queries ships one HTML document, so screen width never decides what a crawler can read.

Keep the template switch for signed-in application screens, where crawler visibility does not matter. For pages that need to be found and quoted, put the content in the server response and let CSS handle the layout difference.

Testing the Website for Responsiveness

LT Browser is an excellent tool with 50+ screens that can not only render your website to check for responsiveness but provides multiple additional tools, which would have been hard to test otherwise.

For example, the network throttling feature of the LT browser can help you test websites for responsiveness on various network bandwidth, defining bottleneck numbers. In addition, smart scroll can scroll the website on two devices simultaneously for better understanding rather than going back and forth on them. Take screenshots, record a video, mark bugs and do much more with the LT browser in just a few clicks. It has helped me in responsive testing, and I hope it will help you too!

Conclusion

For all my friends who understand the importance of mobile users and the data generated from them today, the LWC is an added positive skill to acquire. Although the only goal is to achieve responsiveness, there are many other methods that are tested and proven efficient in developing a responsive website. Implement an LWC code when there are different templates that you want to render for a mobile user and a desktop user.

Since it contains extra configuration and learning bumps, it is better to be sure before starting. If you do, rest assured, your website will be lightning-fast, help you implement dynamic logic through JavaScript, and provide additional methods and functionalities that are great to use. We would love to hear from you about how you leveraged LWC and implemented a logic that helped you inject different data at different data. Till then, have a development-filled day ahead!!

For those looking to dive deeper, resources like the “Top 90+ HTML Interview Questions and Answers ” can be invaluable.

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email