The best MVC, REST API, and full-stack frameworks for Node.js

// pages/dogs/[id].vue

<template>
  <div>
    <div v-if="pending">
      Loading...
    </div>
    <div v-else-if="error">
      <h1>{{ error.data.error }}</h1>
    </div>
    <div v-else>
      <h1>Dog Breed Profile</h1>
      <p>Breed Name: <strong>{{ dog.breed }}</strong></p>
    </div>
  </div>
</template>

<script setup>
// Get the route object to access the 'id' parameter from the URL
const route = useRoute();
const { id } = route.params;

// `useFetch` automatically fetches the data from our API endpoint.
// It handles server-side fetching on the first load.
const { data: dog, pending, error } = await useFetch(`/api/dogs/${id}`);
</script>

SvelteKit

SvelteKit is the full-stack framework for the Svelte front end. It’s similar to Next and Nuxt, with the main difference being the front-end technology.

In SvelteKit, a back-end route looks like so:

// src/routes/api/dogs/[id]/+server.js

import { json, error } from '@sveltejs/kit';

// This is our data source for the example.
const dogBreeds = [
  "Shih Tzu",
  "Australian Cattle Dog",
  "Great Pyrenees",
  "Tibetan Mastiff",
];

/** @type {import('./$types').RequestHandler} */
export function GET({ params }) {
  // The 'id' comes from the [id] directory name.
  const id = parseInt(params.id, 10);

  if (id >= 0 && id < dogBreeds.length) {
    // The json() helper creates a valid JSON response.
    return json({ breed: dogBreeds[id] });
  }

  // The error() helper is the idiomatic way to return HTTP errors.
  throw error(404, 'Dog breed not found');
}

SvelteKit usually splits the UI into two components. The first component is for loading the data (which can then be run on the server):

// src/routes/dogs/[id]/+page.js

import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageLoad} */
export async function load({ params, fetch }) {
  // Use the SvelteKit-provided `fetch` to call our API endpoint.
  const response = await fetch(`/api/dogs/${params.id}`);

  if (response.ok) {
    const dog = await response.json();
    // The object returned here is passed as the 'data' prop to the page.
    return {
      dog: dog
    };
  }

  // If the API returns an error, forward it to the user.
  throw error(response.status, 'Dog breed not found');
}

The second component is the UI:

// src/routes/dogs/[id]/+page.svelte

<script>
  // This 'data' prop is automatically populated by the
  // return value of the `load` function in `+page.js`.
  export let data;
</script>

<div>
  <h1>Dog Breed Profile</h1>
  <p>Breed Name: <strong>{data.dog.breed}</strong></p>
</div>

Conclusion

This article was a survey of the most popular Node web frameworks, with a look at how various frameworks handle route parameters and request handling in a simple file server application. The Node ecosystem is also not limited to web frameworks. It has good data layer/ORM tools like Prisma, Drizzle, and Sequelize; CLI libraries like Oclif, Commander.js, and Inquirer.js; and native-application frameworks like Tauri and Electron.