UNIT - 3

Content Rendering

- Richa Mishra
 Static and Dynamic Web pages

• Static Web pages:

Static Web pages are very simple. It is written in languages such as HTML,
JavaScript, CSS, etc. For static web pages when a server receives a request for a
web page, then the server sends the response to the client without doing any
additional process. And these web pages are seen through a web browser. In static
web pages, Pages will remain the same until someone changes it manually.

- Richa Mishra
 Dynamic Web Pages
• Dynamic Web Pages are written in languages such as CGI, AJAX, ASP, ASP.NET, etc.
• In dynamic web pages, the Content of pages is different for different visitors.
• It takes more time to load than the static web page.
• Dynamic web pages are used where the information is changed frequently, for
example, stock prices, weather information, etc.

- Richa Mishra
- Richa Mishra
- Richa Mishra
 Content Rendering
What Does It Mean To “Render” a Webpage?
To understand this concept, you must first understand how a web browser works.

How Web Browsers Work?

• The primary function of a web browser is to request resources from the web and
display them inside of a browser window.
• Typically a browser will request HTML, CSS, JavaScript and image content from a server
and interpret them based on web standards and specifications.
• They follow standards because it allows websites to behave the same way across all
browsers, and creates less work and fewer headaches for web developers.

Browser Engine
The underlying software that turns HTML pages into the Web page the user sees is
called browser engine. A browser engine includes the programming interface (API) and
the rendering engine, which converts HTML and JavaScript into text and images for
the screen and printer.

- Richa Mishra
 What is rendering?

• Rendering is a process used in web development that turns website code

into the interactive pages users see when they visit a website. The term
generally refers to the use of HTML, CSS, and JavaScript codes.

• The process is completed by a rendering engine, the software used by a

web browser to render a web page. Because of its close association with
web browsers, rendering engines are commonly referred to as browser
engines.

- Richa Mishra
Every Webpage Has Two States – Rendering Occurs Between Them
Every webpage has two states:
 The initial HTML.
 The rendered HTML.

A website can be very different between the two states.

• The initial HTML occurs first. It is the response from the server.
• In it there is HTML and links to resources like JavaScript, CSS, and images that are
needed to build to the page. To see the initial HTML for yourself, view the page
source.
• Rendered HTML is more widely known as the DOM, an abbreviation of Document
Object Model. Every webpage has a DOM. It represents the initial HTML plus any
changes made by JavaScript that HTML called on.
* The DOM is an object-oriented representation of the web page, which can be modified
with a scripting language such as JavaScript.

• Let us now observe:

 What is Server-Side Rendering
 What is Client-Side Rendering
 When to use server-side rendering
 When to use client-side rendering

- Richa Mishra
What is server-side rendering?
• Server-side rendering means that a website’s JavaScript is rendered on the
website’s server. To use the furniture example, this would be like ordering
furniture that arrives at your house fully assembled.
• It works by converting HTML files in the server into usable information for the
browser.
• Whenever you visit a website, your browser makes a request to the server that
contains the contents of the website. The request usually only takes a few
milliseconds, but that ultimately depends on a multitude of factors:
– Your internet speed
– the location of the server
– how many users are trying to access the site
– and how optimized the website is, to name a few
• Once the request is done processing, the browser gets back the fully rendered
HTML and displays it on the screen. If we then decide to visit a different page on
the website, the browser will once again make another request for the new
information. This will occur each and every time we visit a page that our browser
does not have a cached version of.
• It doesn’t matter if the new page only has a few items that are different than the
current page, the browser will ask for the entire new page and will re-render
everything from the ground up.
- Richa Mishra
• The conventional method for getting your HTML up onto a screen was by using server-
side rendering. It was the only way. You loaded up your (.html) pages on your server,
then your server went and turned them into useful documents on your users’ browsers.
• Server-side rendering worked great at the time too, since most webpages were mostly
just for displaying static images and text, with little or no way of interaction.
• Today that’s no longer the case. You could argue that websites these days are more like
applications pretending to be websites. We can use them to send messages, update
online information, shop, and so much more. The web is just a whole lot more
advanced than it used to be.
• So it makes sense that server-side rendering is slowly beginning to take a backseat to
the ever-growing method of rendering webpages on the client side.
• Now, assume this scenario where we have a rendered page which contains some code.
Now next we want the same web page with one paragraph changed.
• Logic would dictate that only the new content should be rendered and the rest should
be left alone. Alas, that isn’t how server-side rendering works. What would actually
happen would be that the entire new page would be rendered, and not just the new
content.
• While it might not seem like a big deal for these two examples, most websites are not
this simple. Modern websites have hundreds of lines of code and are much more
complex. Now imagine browsing a webpage and having to wait for each and every page
to render when navigating the site. This is one of the reasons why the need arouse for
client side rendering. - Richa Mishra
What are the benefits of server-side rendering?

• Because JavaScript is rendered on the website’s server, we get a faster page

experience.

• When Google and other search engine try to access our page, instead of having to
wait for rendering resources to become available before seeing our full page,
they’ll get the fully-rendered page right from the get-go.

What are the risks of server-side rendering?

• Server-side rendering can be expensive and resource-intensive. It can be

expensive because the full burden of rendering your content is on your servers.

• Server-side rendering also tends not to work with third-party JavaScript. So, if you
use services like Bazaarvoice to pull in reviews on your website, they won’t be
rendered with server-side rendering.

- Richa Mishra
- Richa Mishra
 How client-side rendering works
• When developers talk about client-side rendering, they’re talking about rendering
content in the browser using JavaScript.
• So instead of getting all of the content from the HTML document itself, you are
getting a bare-bones HTML document with a JavaScript file that will render the rest
of the site using the browser.
• This is a relatively new approach to rendering websites, and it didn't really become
popular until JavaScript libraries started incorporating it into their style of
development. Some notable examples are Vue.js and React.js.
• This is radically different than using server-side rendering because the server is now
only responsible for loading the bare minus of the website. The main boilerplate.
Everything else is handled by a client-side JavaScript library.
• With a client-side rendering browser fetches all the JavaScript and let compiles
everything before rendering the content.
• With client-side rendering, the initial page load is naturally a bit slow. However, after
that, every subsequent page load is very fast.
• In this approach, communication with server happens only for getting the run-time
data.
• Moreover, there is no need to reload the entire UI after every call to the server. The
client-side framework manages to update UI with changed data by re-rendering only
that particular DOM element.
- Richa Mishra
• Think of client-side rendering like ordering furniture from shop but shopkeaper do
not send the furniture to your house already assembled. Instead, they send you
the parts that you have to assemble once they arrive at your house.

- Richa Mishra
- Richa Mishra
What are the benefits of client-side rendering?
• Because all the burden of rendering content is on the client (i.e. person or bot
trying to view your page), client-side rendering is the cheaper option for the
website owner because it reduces the load on their own servers.
• It’s also the default state for JavaScript websites, making client-side rendering
easier than server-side rendering for the website owner.

What are the risks of client-side rendering?

• Client-side rendering can increase the likelihood of a poor user experience.
JavaScript can add seconds of load time to a page, and if that burden is fully on the
client (website visitor), then they could get frustrated and leave your site.

- Richa Mishra
• So which method is the better option?
It really depends on what you’re planning on
doing with your website.
You need to understand the pros and cons,
then decide for yourself which route is best
for you.

- Richa Mishra
• Now that you’re aware of the pros and cons of each approach, let’s take a look at
ideal scenarios for their implementation.

• When to use server-side rendering?

 An application has very simple UI with fewer pages/features
 An application has less dynamic data
 Read preference of the site is more than write
 The focus is not on rich site and has few users

• When to use client-side rendering?

 An application has very complex UI with many pages/features
 An application has large and dynamic data
 Write preference of the site is more than reading
 The focus is on rich site and a huge number of users

• In a nutshell, server-side rendering is like receiving a pre-assembled toy train set whereas
client-side rendering is like receiving a dismantled one that you need to assemble yourself.
You have to decide whether you’d like to play with a pre-assembled one or prefer assembling
it just the way you want it.

- Richa Mishra
Which is better for SEO, client-side or server-side rendering?

• Between the two options, server-side rendering is better for SEO than client-side
rendering. This is because server-side rendering can speed up page load times,
which not only improves the user experience, but can help your site rank better in
Google search results.
• Server-side rendering is also better for SEO because it removes the burden of
rendering JavaScript off of search engine bots, solving speed-related crawl budget
issues and partial indexing.
• But what if you can’t afford to implement server-side rendering? Or you don’t
have the technical resources to execute it?
• Thankfully, there’s a third option.

The hybrid rendering option: dynamic rendering

• Dynamic rendering is a hybrid of client-side and server-side rendering.
• It works like this.
• When a search engine bot tries to access a page, the website sends over a fully-
rendered page. But when a human tries to access a page, their browser has to
render the page.

- Richa Mishra
• Let us understand, in very simple terms, the steps your browser takes to
convert HTML, CSS, and JavaScript into a working website you can interact
with.
• A web browser is a piece of software that loads files from a remote server and
displays them to you — allowing for user interaction.
• However, within a browser, there’s a piece of software that figures out what to
display to you based on the files it receives. This is called the browser engine.
• The browser engine is a core software component of every major browser, and
different browser manufacturers call their engines by different names. The
browser engine for Firefox is called Gecko, and Chrome’s is called Blink etc.
• When you write some HTML, CSS, and JS, and attempt to open the HTML file
in your browser, the browser reads the raw bytes of HTML from your hard disk
(or network).
• What the browser object needs to work with is a Document Object Model
(DOM) object.
• The browser receives the bytes of data, but it can’t really do anything with it;
the raw bytes of data must be converted to a form it understands. This is the
first step.
• First, the raw bytes of data are converted into characters.
•

- Richa Mishra
• First, we need to understand what DOM is. When a browser sends a
request to a server to fetch an HTML document, the server returns an
HTML page in binary stream format.
• the browser then convert the binary format into a readable text file.
• A typical HTML document could look like this.

- Richa Mishra
Document Object Model (DOM)
• When the browser reads HTML code, whenever it encounters an HTML
element like html, body, div etc., it creates a JavaScript object called a Node.
Eventually, all HTML elements will be converted to JavaScript objects.
• After the browser has created Nodes from the HTML document, it has to
create a tree-like structure of these node objects.
• This will help the browser efficiently render and manage the webpage
throughout its lifecycle.

• Depending on how large

the HTML file is, the
DOM construction
process may take some
time. No matter how
small, it does take some
time, regardless of the
file size.

- Richa Mishra
 CSS Object Model (CSSOM)
• When we design a website, our intentions are to make
it as good looking as possible. And we do that by
providing some styles to HTML elements. In the HTML
page, we provide styles to HTML elements using CSS
which stands for Cascading Style Sheets

• After constructing the DOM, the browser reads CSS

from all the sources and construct a CSSOM.

• CSSOM stands for CSS Object Model which is a Tree

Like structure just like DOM.

• A typical HTML file with some CSS will have the

stylesheet linked as shown:

- Richa Mishra
 CSSOM Tree
• We can visualize the CSSOM tree for our earlier example using the below
diagram.

- Richa Mishra
 Render Tree
• Render-Tree is also a tree-like structure constructed by combining DOM
and CSSOM trees together. The browser has to calculate the layout of
each visible element and paint them on the screen, for that browser uses
this Render-Tree. Hence, unless Render-Tree isn’t constructed, nothing is
going to get printed on the screen which is why we need both DOM and
CSSOM trees.

- Richa Mishra
• When a web page is loaded, the browser first reads the HTML text and
constructs DOM Tree from it. Then it processes the CSS and constructs the
CSSOM Tree from it.
• After these trees are constructed, then it constructs the Render-Tree from
it. Once the Render-Tree is constructed, then the browser starts the
printing individual elements on the screen.
• DOM + CSSOM = Render tree

- Richa Mishra
• In the above document, our webpage is
dependent on style.css to provide styles to
HTML elements

- Richa Mishra
But how do you decide on the best approach for you?
• It all depends on what you plan to do with your website. It is recommended to weigh the pros
and cons, then decide the best route forward. Listed below are a few pointers that will guide you
towards the right decision.
• Server-side pros:
– Search engines can crawl the site for better SEO.
– The initial page load is faster.
– Great for static sites.
• Server-side cons:
– Frequent server requests.
– An overall slow page rendering.
– Full page reloads.
– Non-rich site interactions.

• Client-side pros:
– Rich site interactions
– Fast website rendering after the initial load.
– Great for web applications.
– Robust selection of JavaScript libraries.
• Client-side cons:
– Low SEO if not implemented correctly.
– Initial load might require more time.
– In most cases, requires an external library.

- Richa Mishra