后端路由在 url 匹配路径时即被触发，无论请求来自浏览器地址栏导航还是前端 fetch；但二者目的、行为和适用场景截然不同：导航用于加载完整页面（html），而 fetch 用于静默获取结构化数据（如 json）并由前端动态渲染。
在 Web 开发中，app.get('/restaurants', ...) 这类后端路由只要 HTTP 请求到达该路径且方法匹配，就会执行——它不关心请求发起方式。也就是说：
- ✅ 当你在浏览器地址栏输入 http://localhost:3000/restaurants 并回车，浏览器会自动发送一个 GET 请求，Node.js（或 Express）后端捕获该请求，执行路由处理函数，返回 ALL_RESTAURANTS 数组的 JSON 数据；
- ✅ 当前端调用 fetch('/restaurants')，同样触发同一后端路由，返回相同 JSON 响应。
但关键差异在于上下文、响应用途与可控性：
? 导航（直接访问 URL）的本质是「页面跳转」
- 浏览器默认期望接收 HTML 文档，并完全替换当前页面内容；
- 若后端返回纯 JSON（如 /restaurants），浏览器会直接显示原始 JSON 字符串——无样式、无交互、用户体验极差；
- 无法发送非 GET 请求（如 POST/PUT/DELETE），也无法携带请求体（body）、自定义 Header（如 Authorization）、或控制超时/错误重试逻辑；
- 虽支持查询参数（如 /restaurants?city=Seattle）和自动携带 Cookie，但缺乏编程灵活性。
⚡ fetch 是「数据驱动交互」的核心机制
它让前端以编程方式与后端 API 协作，典型用法如下：
const API_ENDPOINT = 'http://localhost:3000';
const loadRestaurants = async () => {
try {
const res = await fetch(`${API_ENDPOINT}/restaurants`, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
// credentials: 'include' // 如需携带 Cookie
});
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
const restaurants = await res.json();
// ✅ 动态渲染：将数据注入 DOM，而非替换整个页面
const list = document.getElementById('restaurant-list');
list.innerHTML = restaurants.map(r =>
`<li><strong>${r.name}</strong> (ID: ${r.id})</li>`
).join('');
return restaurants;
} catch (err) {
console.error('Failed to load restaurants:', err);
alert('餐厅列表加载失败，请检查网络');
}
};⚠️ 重要注意事项
- CORS 限制：浏览器对跨域 fetch 有严格策略，而直接导航不受 CORS 约束（但 JSON 不会自动渲染为可用界面）；
- MIME 类型语义：后端应为 API 路由设置 Content-Type: application/json，为页面路由返回 text/html，帮助浏览器正确解析响应；
- SEO 与 SSR 场景：若需搜索引擎索引餐厅列表，单纯 fetch + 客户端渲染（CSR）不利于 SEO；此时可结合服务端渲染（SSR）或静态生成（SSG），在服务端预取 /restaurants 数据并注入 HTML；
- 安全边界：避免在前端暴露敏感接口路径或依赖“隐藏 API”逻辑——路由是否可访问取决于服务器权限控制，而非前端是否调用 fetch。
✅ 总结一句话
后端路由是服务端的“守门人”，它响应所有合法请求；而 fetch 是前端的“数据管道”，负责按需、可控、结构化地消费这些响应，并将其转化为用户可见、可交互的界面——导航解决“去哪”，fetch 解决“拿什么、怎么用”。
