Rendering means turning data and code into the page the user sees. In server-side rendering (SSR) this is done on the server before anything reaches the browser, so the browser receives ready, complete HTML. By contrast, in client-side rendering the browser first gets a nearly empty page plus JavaScript and builds the content itself.
A concrete example#
Suppose you have a product page. With SSR, when a user or the Google crawler opens the address, the title, price and description of the product are already in the initial HTML. With client-side rendering, an empty page is shown first and the content appears after the JavaScript runs.
Advantages#
- Faster display of the first content, especially on weak phones and slow connections
- More reliable visibility of content to search engines and to link previews in messaging apps
- Less work on the user's device
Costs#
- More load on the server, because every request must be rendered
- More complexity in implementation and deployment
- You need proper caching to keep response times fast
Where you run into it#
WordPress and most PHP sites are server-side by nature. In the JavaScript world, frameworks such as Next.js and Nuxt provide SSR for React and Vue apps.
Difference from a static site#
On a static site the HTML is built and stored in advance. With SSR the page is built at request time and can depend on the user or on live data.