hnq.me
all concepts
web Updated 2026-07-09 Step 5 of 6

Render

A beginner-friendly guide to understanding rendering in web applications.

On this page 2026-07-09
The Simple Idea Why Rendering Exists Server Rendering Client Rendering Rendering vs Hydration Rendering And Templates Render-Time JIT KitJS And Kitwork Notes My Learning Notes Common Misunderstandings Related Concepts

A beginner-friendly guide to rendering: turning data, templates, or components into output the user can see.

On the web, rendering often means:

data + template -> HTML

Table of Contents

The Simple Idea

Rendering creates visible output.

For web apps, that output is often HTML.

data -> render -> HTML

Rendering answers:

what should the user receive?

Why Rendering Exists

Applications have data.

Users need a readable view of that data.

Rendering bridges that gap.

It can produce:

  • HTML pages,
  • fragments,
  • emails,
  • documents,
  • components,
  • static snapshots.

Rendering is where information becomes presentation.

Server Rendering

Server rendering means the server creates HTML before sending it to the browser.

Benefits:

  • meaningful first response,
  • better SEO surface,
  • simpler sharing,
  • less client JavaScript required,
  • server-owned data and permissions.

The server can send real content first.

The client can add behavior later.

Client Rendering

Client rendering means the browser builds the UI after JavaScript loads.

This can work well for apps with rich interaction.

But it can also move too much truth to the client.

The question is:

which part should be rendered by the server,
and which part should be interactive on the client?

Rendering vs Hydration

Rendering creates output.

Hydration attaches behavior.

render: data -> HTML
hydrate: HTML -> interactive HTML

They work well together.

The server renders meaningful HTML.

The client hydrates the parts that need interaction.

Rendering And Templates

Templates describe shape.

Rendering binds data to that shape.

Example:

template: Hello, {{ name }}
data: name = "Lan"
output: Hello, Lan

Template rendering keeps HTML readable while still allowing dynamic content.

Render-Time JIT

Rendering can also be when a runtime discovers what a page uses.

During render, an engine may see:

  • CSS classes,
  • icons,
  • hydrate attributes,
  • client behaviors,
  • template slots,
  • page-specific assets.

Then it can generate only what the page needs.

That is render-time JIT.

KitJS And Kitwork Notes

KitJS made me care about the moment after HTML reaches the browser. Kitwork made me care about the moment before that: how HTML is produced on the server.

Rendering is where data becomes markup. If the server can render the truth clearly, runtime JS can stay smaller because it does not need to rebuild the whole world in the browser.

That is the relationship I want between Kitwork and KitJS: server truth first, then small client behavior where it is actually needed.

My Learning Notes

Kitwork made rendering feel like a central runtime step.

The server can render HTML from templates.

Then the engine can scan the result for JIT CSS, icons, hydration, and behavior.

That connects several ideas:

server truth -> render -> HTML -> JIT assets -> hydrate behavior

The lesson:

rendering is not only output
rendering is where the runtime learns what the page needs

Common Misunderstandings

"Render means client-side render."

No. Rendering can happen on the server, client, build step, or runtime.

"Server rendering means no interactivity."

No. Server-rendered HTML can be hydrated.

"Rendering and hydration are the same."

No. Rendering creates HTML. Hydration attaches behavior.

Previous: router

Next: template

Related: servertruth, hydrate, jit

Search