Evolution of Response Generation: From Static Files to Edge Rendering

# NCSA httpd file serving (circa 1993, simplified) int serve_file(int client_socket, char* file_path) { FILE* file = fopen(file_path, "r"); if (!file) { return send_error(client_socket, 404, "Not Found"); }
/* Determine content type from file extension */ char* content_type = get_content_type(file_path);
/* Send headers */ write(client_socket, "HTTP/1.0 200 OK\r\n", 17); write(client_socket, "Content-Type: ", 14); write(client_socket, content_type, strlen(content_type)); write(client_socket, "\r\n\r\n", 4);
/* Read file and send directly to client */ char buffer[4096]; size_t bytes_read; while ((bytes_read = fread(buffer, 1, sizeof(buffer), file)) > 0) { write(client_socket, buffer, bytes_read); }
fclose(file); return 1; }

# NCSA httpd.conf (circa 1994) ServerRoot /usr/local/etc/httpd DocumentRoot /var/www/html DirectoryIndex index.html
# Server had to be restarted to reflect changes MaxClients 150

# Perl CGI script with embedded HTML (circa 1995) #!/usr/bin/perl print "Content-type: text/html\n\n"; print "<html>\n"; print "<head><title>Product Listing</title></head>\n"; print "<body>\n"; print "<h1>Our Products</h1>\n";
# Connect to database (simplified) @products = get_products_from_database();
print "<table border=1>\n"; print "<tr><th>Name</th><th>Price</th></tr>\n";
foreach $product (@products) { print "<tr>\n"; print "  <td>$product->{name}</td>\n"; print "  <td>\$$product->{price}</td>\n"; print "</tr>\n"; }
print "</table>\n"; print "</body>\n"; print "</html>\n";

# Early template with variable substitution (circa 1996) #!/usr/bin/perl
$template = <<EOT; <html> <head><title>Product Listing</title></head> <body> <h1>Our Products</h1> <table border=1> <tr><th>Name</th><th>Price</th></tr> %PRODUCT_ROWS% </table> </body> </html> EOT
# Build product rows $product_rows = ''; foreach $product (@products) { $product_rows .= "<tr><td>$product->{name}</td><td>\$$product->{price}</td></tr>\n"; }
# Simple string substitution $template =~ s/%PRODUCT_ROWS%/$product_rows/;
print "Content-type: text/html\n\n"; print $template;

# Server-Side Includes example (circa 1997) <!-- products.html --> <html> <head> <title>Product Catalog</title> </head> <body> <!--#include file="header.html" -->
<h1>Our Products</h1>
<!--#exec cmd="database_query.pl" -->
<!--#include file="footer.html" --> </body> </html>

# JSP example (circa 1999) <%@ page language="java" %> <%@ include file="header.jsp" %>
<h1>Product Listing</h1>
<table border="1"> <tr><th>Name</th><th>Price</th></tr>
<% // Get products from database List<Product> products = ProductDAO.getAllProducts();
// Generate table rows for(Product product : products) { %> <tr> <td><%= product.getName() %></td> <td>$<%= product.getPrice() %></td> </tr> <% } %> </table>
<%@ include file="footer.jsp" %>

# Perl script with basic caching (circa 2000) #!/usr/bin/perl
$cache_dir = "/tmp/page_cache"; $cache_file = "$cache_dir/products_" . md5($query_string) . ".html"; $cache_time = 300; # 5 minutes
# Check if cached version exists and is fresh if (-e $cache_file && (time() - (stat($cache_file))[9]) < $cache_time) { print "Content-type: text/html\n\n";
# Serve from cache open(CACHE, $cache_file); while(<CACHE>) { print; } close(CACHE); exit; }
# Generate page content (simplified) $content = generate_product_page();
# Save to cache mkdir($cache_dir) unless -d $cache_dir; open(CACHE, ">$cache_file"); print CACHE $content; close(CACHE);
# Serve fresh content print "Content-type: text/html\n\n"; print $content;

# Early Memcached usage (circa 2003) <?php // Initialize Memcached connection $memcache = new Memcache; $memcache->connect('localhost', 11211);
// Cache key based on query parameters $cache_key = 'products_' . md5(serialize($_GET));
// Try to get from cache $cached_content = $memcache->get($cache_key); if ($cached_content) { echo $cached_content; exit; }
// Start output buffering to capture generated content ob_start(); ?>
<!-- Begin actual page template --> <html> <head><title>Products</title></head> <body> <?php include('header.php'); ?>
<h1>Product Listing</h1> <table> <!-- Generate product rows --> <?php foreach($products as $product): ?> <tr> <td><?php echo $product['name']; ?></td> <td>$<?php echo $product['price']; ?></td> </tr> <?php endforeach; ?> </table>
<?php include('footer.php'); ?> </body> </html> <!-- End actual page template -->
<?php // Get content from buffer $content = ob_get_contents(); ob_end_flush();
// Store in cache for 5 minutes $memcache->set($cache_key, $content, 0, 300); ?>

# Smarty template engine example (circa 2003) <?php // Controller code require('Smarty.class.php'); $smarty = new Smarty();
// Get data from model $products = ProductModel::getAll();
// Assign variables to template $smarty->assign('title', 'Product Catalog'); $smarty->assign('products', $products);
// Render template $smarty->display('products.tpl'); ?>

# Rails controller (circa 2005) class ProductsController < ApplicationController def index @products = Product.all
respond_to do |format| format.html # index.html.erb format.xml  { render :xml => @products } end end end

# PHP content negotiation (circa 2008) <?php // Get products from database $products = Product::findAll();
// Determine response format based on Accept header or extension $format = 'html'; if (isset($_GET['format'])) { $format = $_GET['format']; } elseif (isset($_SERVER['HTTP_ACCEPT'])) { if (strpos($_SERVER['HTTP_ACCEPT'], 'application/json') !== false) { $format = 'json'; } elseif (strpos($_SERVER['HTTP_ACCEPT'], 'application/xml') !== false) { $format = 'xml'; } }
// Generate appropriate response switch ($format) { case 'json': header('Content-Type: application/json'); echo json_encode($products); break;
case 'xml': header('Content-Type: application/xml'); echo '<?xml version="1.0" encoding="UTF-8"?>'; echo '<products>'; foreach ($products as $product) { echo '<product id="' . $product->id . '">'; echo '<name>' . htmlspecialchars($product->name) . '</name>'; echo '<price>' . $product->price . '</price>'; echo '</product>'; } echo '</products>'; break;
default: // HTML header('Content-Type: text/html'); include('templates/header.php'); include('templates/product_list.php'); include('templates/footer.php'); break; } ?>

# Rails RESTful content negotiation (circa 2008) class ProductsController < ApplicationController def index @products = Product.all
respond_to do |format| format.html # renders index.html.erb format.xml  { render :xml => @products } format.json { render :json => @products } format.atom # renders index.atom.builder format.mobile # renders for mobile devices end end end

# Rails fragment caching (circa 2010) <% cache ["v1", @product] do %> <div class="product"> <h2><%= @product.name %></h2> <p><%= @product.description %></p>
<% cache ["v1", "product-price", @product] do %> <div class="price"> <%= number_to_currency(@product.price) %> </div> <% end %>
<% cache ["v1", "product-reviews", @product] do %> <div class="reviews"> <h3>Customer Reviews</h3> <% @product.reviews.each do |review| %> <div class="review"> <%= render "review", review: review %> </div> <% end %> </div> <% end %> </div> <% end %>

# PHP with HTTP caching headers (circa 2012) <?php $product = Product::find($id);
// Generate ETag based on product data $etag = md5(json_encode($product) . $product->updated_at);
// Check if client has a cached version if (isset($_SERVER['HTTP_IF_NONE_MATCH']) && $_SERVER['HTTP_IF_NONE_MATCH'] == $etag) { // Client has current version, return 304 Not Modified header('HTTP/1.1 304 Not Modified'); exit; }
// Set caching headers header('ETag: ' . $etag); header('Cache-Control: max-age=3600'); // Cache for 1 hour header('Last-Modified: ' . gmdate('D, d M Y H:i:s', strtotime($product->updated_at)) . ' GMT');
// Continue with rendering the response ?>

# PHP range request handling (circa 2005) <?php $file = '/path/to/large_video.mp4'; $size = filesize($file); $file_handle = fopen($file, 'rb');
// Process range request $range = isset($_SERVER['HTTP_RANGE']) ? $_SERVER['HTTP_RANGE'] : null; if ($range) { // Parse range header list($range_unit, $range_value) = explode('=', $range, 2);
if ($range_unit == 'bytes') { // Get start and end positions list($start, $end) = explode('-', $range_value, 2);
$start = intval($start); $end = $end ? intval($end) : $size - 1;
// Set partial content headers header('HTTP/1.1 206 Partial Content'); header("Content-Range: bytes $start-$end/$size"); header("Content-Length: " . ($end - $start + 1));
// Seek to start position fseek($file_handle, $start);
// Output only the requested part $buffer_size = 8192; $bytes_to_send = $end - $start + 1;
while ($bytes_to_send > 0 && !feof($file_handle)) { $bytes_this_round = min($buffer_size, $bytes_to_send); echo fread($file_handle, $bytes_this_round); flush(); $bytes_to_send -= $bytes_this_round; } } } else { // Normal request - send entire file header("Content-Length: $size"); header("Accept-Ranges: bytes");
while (!feof($file_handle)) { echo fread($file_handle, 8192); flush(); } }
fclose($file_handle); ?>

# Server-Sent Events in Node.js (circa 2015) const http = require('http');
http.createServer((req, res) => { // Check if it's an SSE request if (req.headers.accept && req.headers.accept == 'text/event-stream') { // Set SSE headers res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' });
// Send initial message sendEvent(res, 'connected', 'Connection established');
// Send a new message every 5 seconds const intervalId = setInterval(() => { const data = { time: new Date().toISOString(), value: Math.random() };
sendEvent(res, 'update', JSON.stringify(data)); }, 5000);
// Clean up when client disconnects req.on('close', () => { clearInterval(intervalId); }); } else { // Normal request - serve HTML page res.writeHead(200, {'Content-Type': 'text/html'}); res.end(` <!DOCTYPE html> <html> <head> <script> const evtSource = new EventSource('/');
evtSource.addEventListener('connected', (e) => { console.log(e.data); });
evtSource.addEventListener('update', (e) => { const data = JSON.parse(e.data); document.getElementById('time').textContent = data.time; document.getElementById('value').textContent = data.value; }); </script> </head> <body> <h1>Server-Sent Events Demo</h1> <p>Time: -</p> <p>Value: -</p> </body> </html> `); } }).listen(3000);
function sendEvent(res, event, data) { res.write(event: ${event}\n); res.write(data: ${data}\n\n); }

# Modern React component (circa 2018) import React, { useState, useEffect } from 'react';
function ProductList() { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null);
useEffect(() => { // Fetch data from API fetch('/api/products') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { setProducts(data); setLoading(false); }) .catch(error => { setError(error.message); setLoading(false); }); }, []);
if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error}</div>;
return ( <div className="product-list"> <h1>Our Products</h1> <div className="card-grid"> {products.map(product => ( <ProductCard key={product.id} product={product} /> ))} </div> </div> ); }
function ProductCard({ product }) { return ( <div className="product-card"> <img src={product.image} alt={product.name} /> <h3>{product.name}</h3> <p className="price">${product.price.toFixed(2)}</p> <button onClick={() => addToCart(product.id)}> Add to Cart </button> </div> ); }

# Express.js API endpoint (circa 2018) const express = require('express'); const router = express.Router(); const ProductModel = require('../models/product');
// API endpoint for product list router.get('/api/products', async (req, res) => { try { // Parse query parameters const page = parseInt(req.query.page) || 1; const limit = parseInt(req.query.limit) || 20; const category = req.query.category;
// Build query const query = {}; if (category) { query.category = category; }
// Execute query with pagination const products = await ProductModel.find(query) .skip((page - 1) * limit) .limit(limit) .sort({ createdAt: -1 });
// Get total count for pagination const total = await ProductModel.countDocuments(query);
// Return JSON response res.json({ products, pagination: { page, limit, total, pages: Math.ceil(total / limit) } }); } catch (err) { res.status(500).json({ error: err.message }); } });
module.exports = router;

# Next.js SSR example (circa 2020) // pages/products.js import ProductList from '../components/ProductList';
export default function ProductsPage({ products }) { return ( <div className="container"> <h1>Product Catalog</h1> <ProductList initialProducts={products} /> </div> ); }
// Server-side data fetching export async function getServerSideProps() { // This runs on the server for every request const res = await fetch('https://api.example.com/products'); const products = await res.json();
return { props: { products, }, }; }

# Cloudflare Worker example (circa 2022) // Edge function that generates HTML directly addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)) })
async function handleRequest(request) { const url = new URL(request.url)
// Product detail page if (url.pathname.startsWith('/products/')) { const productId = url.pathname.split('/')[2]
// Get product data from edge KV store or origin const product = await getProductData(productId)
// Generate HTML at the edge return new Response( generateProductHTML(product), { headers: { 'Content-Type': 'text/html', 'Cache-Control': 'public, max-age=3600' } } ) }
// Pass other requests to origin return fetch(request) }
function generateProductHTML(product) { return ` <!DOCTYPE html> <html> <head> <title>${product.name} | Our Store</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/styles.css"> </head> <body> <header> <nav><!-- Navigation HTML --></nav> </header>
<main> <div class="product-detail"> <img src="${product.image}" alt="${product.name}"> <h1>${product.name}</h1> <p class="price">$${product.price.toFixed(2)}</p> <p>${product.description}</p> <button class="add-to-cart" data-product-id="${product.id}"> Add to Cart </button> </div> </main>
<footer><!-- Footer HTML --></footer>
<script src="/client.js"></script> </body> </html> ` }

# Next.js middleware for edge processing (circa 2022) // middleware.js import { NextResponse } from 'next/server';
export function middleware(request) { const url = request.nextUrl.clone();
// Get user country from request (provided by Vercel's edge network) const country = request.geo?.country || 'US';
// Redirect based on country if (url.pathname === '/products') { if (country === 'CA') { url.pathname = '/products/canada'; return NextResponse.redirect(url); } if (country === 'MX') { url.pathname = '/products/mexico'; return NextResponse.redirect(url); } }
// Rewrite certain paths (internal only) if (url.pathname.startsWith('/p/')) { // Rewrite /p/123 to /products/123 internally const productId = url.pathname.split('/')[2]; url.pathname = /products/${productId}; return NextResponse.rewrite(url); }
// Add custom headers for all HTML responses const response = NextResponse.next(); if (url.pathname.endsWith('.html') || url.pathname === '/' || !url.pathname.includes('.')) { response.headers.set('X-Country', country); response.headers.set('X-Framework', 'Next.js'); }
return response; }
export const config = { matcher: ['/((?!api|_next/static|favicon.ico).*)'], };