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.
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, or Jekyll, 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 and 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 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.