How Rendering Works
There are three different types of rendering: client-side, server-side, and dynamic rendering. The difference between the three types of rendering depends on the method of delivery of resources to the browser and to search engine bots. Each of the three options has pros and cons.
Client-side rendering is when the content of a website is rendered in the browser instead of the website's server. This is the default form of rendering.
One way to understand the process of rendering is to think of the site assets as ingredients and the fully rendered site as a ready-to-eat meal. With client-side rendering, the ingredients are delivered to you, but you still need to take the time to assemble your meal.
Client-side rendering is often more cost-effective than server-side or dynamic rendering, but it can come at the cost of a quality user experience. This is because client-side rendered websites often take longer to load.
Server-side rendering is when the content of a website is rendered by the server rather than the browser.
If we go back to the food analogy, you can think of server-side rendering as a food delivery service. The hard part of cooking the meal is performed by the delivery service, so all you need to do is open it up, maybe warm it up a bit, and set the table.
Overall, there are fewer page speed and crawl budget-related SEO issues with server-side rendering than client-side rendering. However, there are some cons. First, server-side rendering is more expensive, and while first contentful paint is improved substantially, time-to-interactive often lags. For the user, this means that the page appears to load faster, but they cannot interact with the page until all resources have been loaded.
Dynamic rendering is the process of serving content based on the user agent that calls it. This means serving a client-side rendered version of your site for human users and a separate, server-side version for search engines.