# Rendering for Content-Driven Web Apps

Rendering refers to the process of creating the code needed to create a page
that end users can interact with through their browser. This includes preparing
the content, applying logic and processing and including any UI elements and
other required components needed to display the final page. Content-driven
applications have a focus on fast load speed, low latency and fast rendering
times.

## Server-side rendering (SSR)

Server-side rendering (SSR) involves rendering web pages on the server and then
sending the completely rendered HTML to the client's browser rather than
rendering them on the client-side with JavaScript. When users access an
application, their browser sends a request to the server. The application
processes the request on the server, which includes collecting data from
databases or external APIs, then renders the HTML for the requested page. The
server then sends the fully rendered HTML of the page back to the user's
browser. When the user's browser receives the HTML, the browser loads any
required JavaScript files.

[Learn HTML at web.dev](https://web.dev/learn/html).

Benefits of using SSR include a fast initial loading speed, good search engine
optimization (SEO) performance, reliability, and a good overall user experience.
However, SSR can be more complex to implement than client-side rendering (CSR)
due to performance overhead and the development skill necessary to build and
maintain SSR-capable applications. SSR is especially beneficial for
content-driven web applications, ecommerce platforms, and any application that
requires good SEO performance and fast initial response speeds.

## Static Site Generation (SSG)

Static site generation (SSG) generates static HTML files at build time and
delivers them to users without server-side or client-side rendering. Web content
is authored, usually in a structured format such as Markdown, JSON, or YAML, and
includes text, images, and other assets. A static site generator tool, such as[Hugo](https://gohugo.io/), or
[Jekyll](https://jekyllrb.com/), processes the content and
generates HTML, CSS, and JavaScript files. The static output is the entire
website, and these static files are deployed to a web server, CDN, or hosting
service.

Learn more about [CSS](https://web.dev/learn/css)
and [HTML](https://web.dev/learn/html)
at web.dev.

Since the files are static, they can be cached and therefore load very quickly.
SSG is a good option for web applications that don't change frequently or those
that are updated through periodic site builds. It is not a suitable choice for
web applications with dynamic interactivity.

## Client-side Rendering (CSR)

Client-side rendering (CSR) occurs on the client's browser, not on the server.
Web applications are often loaded at minimal HTML templates, and then the
content is manipulated dynamically using JavaScript and data from servers or
APIs. After an application request, the server sends a minimal HTML document
with the basic structure and JavaScript code needed to render the page. The
JavaScript code is executed in the user's browser. The code then processes the
fetched data and generates the content, including CSS, HTML, and all interactive
elements. The JavaScript code then responds to user interaction, such as form
submission.

Benefits of CSR include fast page transitions and responsive interfaces.
[CSR-based web
applications](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)
often have slow initial loading times compared to SSR, and can present SEO
challenges. As CSR applications grow, they can become quite complex to develop
and maintain.