CodingNic
Sign In Book Session

Server-Rendered Views

Server-Rendered Views vs APIs

Server-Rendered Views 8 min read

Server-Rendered Views vs APIs

Objectives

By the end of this lesson, you should be able to:

  • Explain the difference between a server-rendered page and a JSON API response
  • Identify situations where each approach fits better
  • Recognize that a single Express app can do both at once

💡 Why this matters: Module 5 built JSON APIs, this module builds server-rendered HTML. Neither one is simply “the right way,” real projects choose deliberately, and plenty of applications use both at once.

The Core Difference

A JSON API route (Module 5) calls res.json(data), sending raw structured data, with no visual presentation attached, some separate frontend (a React app, a mobile app, another service) is responsible for turning that data into something a person looks at. A server-rendered view route (this module) calls res.render(template, data), sending back a complete, ready-to-display HTML page, the browser just displays it directly, no separate frontend application required.

When Server-Rendered Views Fit Well

Internal tools and admin panels, where development speed matters more than a rich interactive frontend. Content-heavy sites (blogs, documentation, marketing pages) where search engines need to see fully-formed HTML immediately, without waiting for JavaScript to run. Simple CRUD applications where a full separate frontend framework would be more complexity than the project needs. Situations where the same team owns the whole stack and doesn’t want to maintain two separate applications.

When a JSON API Fits Better

Any application with a rich, interactive frontend (Module 6 of the frontend track covered exactly this kind of API consumption) built with React, Vue, or similar, that frontend needs data, not pre-rendered HTML. A mobile app consuming the same backend, mobile apps can’t use server-rendered HTML at all, they need structured data. Multiple different clients (a web app and a mobile app) sharing one backend, a JSON API serves both, a server-rendered view only serves a browser.

Using Both in the Same App

javascript
app.get('/dashboard', (req, res) => {
  res.render('dashboard', { user: getUser(req) });
});

app.get('/api/users/:id', (req, res) => {
  res.json(getUser(req.params.id));
});

Nothing prevents a single Express app from having some routes that render views and other routes, often prefixed with /api, that return JSON, this is common in practice, an admin panel rendered as HTML, alongside a JSON API the same backend exposes for a separate mobile app.

Try It

  1. List three real applications you use regularly, and guess whether each is more likely server-rendered, a JSON API with a separate frontend, or genuinely both.
  2. Explain, in your own words, why a mobile app cannot consume a server-rendered HTML view the way a browser can.
  3. Sketch (in words, not code) a small project that would benefit from having both an /api prefix returning JSON and regular routes rendering HTML pages.
  4. Explain, in your own words, one advantage server-rendered HTML has for a page’s initial load speed compared to a page that fetches its data via a separate API call after loading.

Recap

  • A JSON API sends raw data, a server-rendered view sends complete, ready-to-display HTML.
  • Server-rendered views fit internal tools, content-heavy sites, and simple CRUD apps, JSON APIs fit rich interactive frontends and multiple client types (web, mobile).
  • A single Express app can serve both at once, often splitting API routes under an /api prefix from regular page routes.

Next lesson: this module’s exercises, building a small multi-page server-rendered site.