Server-rendered vs client
Learn templating approaches and the role of HTML.
Server-side and client-side
You can build HTML in two places: server-side and client-side. With server-side rendering, the server gathers data and sends ready HTML to the browser; the page is visible at first paint. With client-side rendering, the browser receives an empty shell, then JavaScript fetches data and builds the HTML there.
Both share one target: HTML. Whichever path you pick, what you produce is still HTML tags. A template shows up in both worlds: it is the way to write repeating HTML chunks as a single reusable pattern.
HTML is the target of both approaches
When you look at both approaches, the shared fact is this: what gets produced is HTML. Server-side rendering builds HTML directly; client-side rendering builds HTML through JavaScript. In both cases the browser parses the same tags.
That is why solid HTML knowledge matters. Whichever side you pick, using semantic tags like <header>, <main> and <article> correctly keeps the page accessible and SEO-friendly. Templates are written on this shared ground too.
When to pick which approach?
Each approach has its own strength. Server-side rendering shows the page fast on first paint and lets search engines read content directly; it fits dynamic sites, blogs and shops. Client-side rendering makes in-page transitions snappy; it shines in app-like interfaces (dashboards, editors).
Hybrid approaches that blend the two are also common. But wherever you stand, writing HTML well is the core skill. In this group we will strengthen that base with templates, partials and data bridges.
Exercise Write a static server-side page
Build a static, server-rendered page inside body: a <header> holding a non-empty <h1> (text 'Daily Post'), a <main> holding an <article>, the article holding a non-empty <h2> and a non-empty <p>, and finally a <footer> with a non-empty <p> (text '© 2026 Gazette'). Add no JavaScript.
Show example solution
<body>
<header>
<h1>Daily Post</h1>
</header>
<main>
<article>
<h2>Getting started</h2>
<p>Today we begin our look at HTML templates.</p>
</article>
</main>
<footer>
<p>© 2026 Gazette</p>
</footer>
</body>Test yourself
-
In which approach is HTML built on the server and sent ready to the browser?
- Writing only CSS
- Server-side rendering
- Only adding an image
- Sending only raw data
Show answer
Server-side rendering — Correct. With server-side rendering, HTML is built on the server and arrives ready in the browser.
-
Complete the sentence
<p>With server-side rendering, HTML is built on the ____ and sent ready to the browser.</p>Show answer
<p>With server-side rendering, HTML is built on the server and sent ready to the browser.</p> -
Match each concept to its role
- Server-side render
- HTML built on server
- Client-side render
- HTML built in browser
- Template
- Reusable HTML pattern
- Static HTML
- Needs no JavaScript