CODEWITHSUNDEEP
rendering
Miroslav Trninic
Miroslav Trninic

Reputation: 3455

rendering in context of web development

I don't quite understand the meaning of rendering in context of web development. When I read about browsers architecture,rendering is something about displaying fetched content from the internet. On the other hand, there are definitions of client and server rendering (with no browsers mentioned). For example in Backbone.View class we have render method that is responsible for connecting data with markup.

Outside of web-development context, there is a Wiki definition:

Rendering is the process of generating an image from a model (or models in what collectively could be called a scene file), by means of computer programs. Also, the results of such a model can be called a rendering

How to properly understand this concept ?

Thanks.

Upvotes: 20

Views: 25955

Answers (5)

lchristmann
lchristmann

Reputation: 575

When talking only about browser architecture, rendering means the definition you've shown: generating an image from a description like a PNG file or HTML+CSS documents and usually also displaying it on a screen

See

Rendering is the process of generating an image from a model by means of a computer program.
~ Rendering (computer graphics) article on Wikipedia

or

Rendering, that is display of the requested contents on the browser screen.
~ How browsers work article on web.dev by Tali Garsiel, 2011

This rendering process in the browser can be modeled as follows. (Chrome DevRel, MDN Web Docs)

enter image description here

  1. Parse HTML and CSS into tree data structures: DOM and CSSOM
  2. Merge both trees into one: Render Tree
  3. Calculate the layout (add size and position to each visible element in the tree)
  4. Paint elements on the screen
  5. Execute JavaScript for interactivity (optional)

=> The image on the browser screen is generated from a description (your HTML and CSS files).
      And from the resulting models (the "OM" in DOM and CSSOM stands for Object Model).

Note that DOM and CSSOM can directly be created and manipulated with JavaScript, without having HTML and CSS. Many Frontend-Frameworks do this.

But in the context of web development, rendering additionally (!) means the step before: generating the description (HTML+CSS) from another description (JavaScript/PHP/... code + data).

See

Rendering is the process of generating HTML markup to display web pages in the browser.
~ Rendering on the Web article on Netlify Blog, 2023

or

Rendering is the process of turning data and code into HTML, that can be seen by the end user
~ 10 Rendering Patterns for Web Apps 0:20 video by Fireship

The Rendering Patterns you mentioned (Server-Side Rendering and Client-Side Rendering) have gotten their name from the location where the HTML is generated/"rendered" (Client vs. Server).

While we're at it: rendering patterns are not only about where, but also about when HTML/CSS or directly DOM/CSSOM are generated.

enter image description here

  • Static Site Generation (SSG) -> HTML & CSS is generated (when?) way in advance, (where?) on some dev's local machine or a build server
  • Server-Side Rendering (SSR) -> HTML & CSS is generated (when?) at request, (where?) on the server
  • Client-Side Rendering (CSR) -> DOM & CSSOM are generated (when?) after request, (where?) on the client (in the browser)

Thus, Rendering in web development is defined as...

...any creation or modification of HTML and CSS files, or of DOM and CSSOM, as well as all subsequent actions of the browser, that are necessary to draw the image on the screen.

Some make a further distinction between solely manipulating existing HTML/CSS or DOM/CSSOM ("Re-Rendering") and creating it from scratch ("Initial Rendering").

Upvotes: 2

AbHi
AbHi

Reputation: 119

In simple words: rendering means taking your code and processing it to show on the browser, as an HTML file.

for example, you written a code

import cat.png

now your code will be rendered by the browser and it'll show you a cat image on the browser.

Rendering of a web page means different for web server and browser.

Rendering by a Server

in terms of web server, your code will be rendered and give you an HTML output by your web server.

something like this

<img src="cat.png">

Rendering by a Browser

in terms of web browser, taking the HTML code and show it into the browser, is called rendering by a browser.

something like

** image of the cat **

Upvotes: 1

Sreekanth
Sreekanth

Reputation: 395

I would like to provide a general meaning to this query.

Rendering in programming refers to processing any piece of code that we have written and showing the result of it.

Eg: I could write a web page which may consists of dropdowns, checkboxes and any few other UI controls. Now when I load this page in browser I expect to see all the controls properly loaded. If something is missing then I could say it as page rendering is failing.

It's just the process of producing the results out of the piece of code that we have written either in client side or server side.

Upvotes: 5

TankTank0816
TankTank0816

Reputation: 21

Studying different array methods, I came across the word "render" in explanation of understanding the concept and by definition by breaking the word down in a grammatical format: it means to repeat, yield, to give back. You can only give back what has been collected through extraction 'such as data' and output that information back out. Hopes this helps. 1st time answering questions.

Upvotes: 2

Tan Nguyen
Tan Nguyen

Reputation: 3354

Rendering is the process of gathering data (if any) and load the associated templates (or just send the output directly). Then apply the gathered data to the associated templates. The final output is sent to the user.

This concept is quite the same for both client and server. In client, when using Backbone.View, the render method is more like a conventional method where you can put your rendering logic in it. You can call it draw, it is totally ok. The main concept of Backbone.View is that you get your data from somewhere (mostly from this.model) and then load the associated templates (from the DOM using $('#template-id').html() or using the text plugin of requirejs to load templates using AJAX requests). After you have the data and template, you can use your own template engine and "make" the final output then append it to the DOM so that users can see it

The server will probably do the same thing, and then send back the final output so that the browser can "render" it. There are some minor differences, though. In client side, you load your templates through ajax requests or from the DOM, in server side, you will probably load your templates from hard drive. As for the data, in client side, you get your data by using ajax requests or the data is already embedded to the response by the server (by inline javascript objects). In server side, you will get your data from the database (or cache) or from some 3rd party services

Upvotes: 23

Related Questions