Rendering is the aspect of web development concerned with translating code into a visual and interactive website. The browser uses HTML and CSS to build a render tree. We can think of the render tree as a blueprint for the page view that the user eventually sees.
There are different ways to render a web app. Each approach has benefits and drawbacks, and we choose a rendering method depending on our priorities: SEO, user experience, and performance. In this lesson, we’ll discuss client-side and server-side rendering.
In client-side rendering, the content of the page is dynamically generated in the browser as the user navigates the app. Alternatively, in server-side rendering, the server generates the content and sends it to the browser, on-demand. We can also combine client-side and server-side rendering to use hybrid-rendering to incorporate the advantages of both. In hybrid-rendering, static content is generated on the server, while dynamic content is generated on the client-side as the user navigates the site.
We’ll go into more detail on client-side rendering and server-side rendering in the upcoming exercises.
Here are some questions to test your understanding of key concepts. Try answering the question on your own first. Then click on the “Check Answer” button to check your answer.
How does client-side rendering differ from server-side rendering?
With client-side rendering, content is dynamically generated in the browser. With server-side rendering content is generated on the server, then sent to the browser to be rendered.