Scribd
Upload
7 views

Rendering

Uploaded by

tikakhan652
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Rendering

Uploaded by

tikakhan652
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Rendering

Theory
Made By Aiza Nadeem
Overview
Introduction of Rendering
Types of Rendering
What is Server
Server Side Rendering
Client Side Rendering
Differnce B/w CSR SSR
Key Benefits of Rendering
Thanks For Watching
Introduction Of Rendering
Rendering in React refers to the process where
React converts components into DOM elements.
React efficiently updates the UI by using the virtual
DOM, ensuring only the necessary parts of the
interface are re-rendered when the state or props
change.
Types of Rendering Client Side Rendering
Client-Side Rendering (CSR) in React
occurs when the browser renders

in React
content dynamically using JavaScript
after the initial page load.

Server Side Rendering


In React, rendering types include Client-Side
Server-Side Rendering (SSR) in React pre-
Rendering (CSR), Server-Side Rendering (SSR), renders pages on the server, delivering
Static Site Generation (SSG), and Incremental fully rendered HTML to the client for
faster initial load and improved SEO.
Static Regeneration (ISR), each optimizing
performance and user experience differently.
Static Site Generation
Static Site Generation (SSG) in React pre-
renders pages at build time, delivering
fast-loading static HTML content with
improved performance.
What is Server
A server is a powerful computer or
software system that provides data,
resources, or services to other
devices (clients) over a network. It
handles requests, processes them,
and sends responses, enabling
functionalities like hosting websites,
storing files, or running applications.
Client Side Rendering

Client-Side Rendering (CSR) is a web development technique where the


browser handles rendering after receiving minimal HTML, along with
JavaScript files. The browser executes the JavaScript to dynamically
generate and update the content, improving navigation speed but
potentially slowing initial load times.
Server Side Rendering

Server-Side Rendering (SSR) is a web technique where the server generates


fully rendered HTML pages and sends them to the browser. This approach
improves initial load speed and SEO since content is rendered before reaching
the client, reducing browser-side JavaScript execution.
Differnce B/w CSR SSR
Client Side Rendering Server Side Rendering
Content is rendered in Content is pre-rendered
the browser (client- on the server before
01 02 03
side). being sent.
Faster initial load
Slower initial load, as
with pre-rendered
JavaScript must be
HTML from the
executed first.
server.
Faster after the initial
Slightly slower for
load, as only parts are
subsequent page loads
reloaded.
due to server fetch.
Key Benefits of Rendering:

1. Improved Performance: Efficient rendering updates only the necessary parts


of the UI, reducing load on the browser and enhancing speed.
2. Better User Experience: Quick and dynamic updates to the UI improve
interactivity, responsiveness, and smooth transitions for users.
3. Enhanced SEO: Server-side rendering provides fully rendered HTML to search
engines, improving visibility and indexing for better SEO results.
ASK ME A QUESTION?
Thanks For watching this presentation

You might also like