TUTORIAL

无后端站点方案

无后端站点方案

发布时间：2026-08-27 作者：尧图建站 频道：轻量化站点开发
无后端站点方案

"做一个网站要搭数据库、写后端接口、配服务器"——这是十年前的常识。如今有种新玩法：站点本身没后端，所有动态能力靠"调用第三方服务 + 前端渲染"实现。这种架构叫 JAMstack（JavaScript + API + Markup），用静态站点的成本，做出动态站点的体验。本篇带你理解无后端站点的运作逻辑与落地方式。

一、JAMstack：用 API 替代自建后端

JAMstack 的核心思想：前端是预编译的静态页面，所有动态需求通过 JS 调用第三方 API 实现。表单提交走 Form 服务、评论走 Disqus、搜索走 Algolia、内容管理走 Headless CMS、支付走 Stripe。你不用维护任何服务器，每个功能都"外包"给专业服务，站点本身永远是静态文件。

// JAMstack 站点的动态能力全靠前端调 API
// 例1：表单提交（用 Formspree 服务，无需后端）
const form = document.querySelector('#contact-form');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = new FormData(form);
  try {
    const res = await fetch('https://formspree.io/f/your-form-id', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' }
    });
    if (res.ok) {
      showToast('提交成功，我们会尽快联系您');
      form.reset();
    } else {
      showToast('提交失败，请稍后重试');
    }
  } catch (err) {
    showToast('网络异常，请检查后重试');
  }
});

// 例2：站内搜索（用 Algolia，无需自建索引）
import algoliasearch from 'algoliasearch';
const client = algoliasearch('APP_ID', 'SEARCH_KEY');
const index = client.initIndex('articles');

searchInput.addEventListener('input', async (e) => {
  const { hits } = await index.search(e.target.value);
  renderResults(hits);  // 前端渲染搜索结果
});

// 例3：评论系统（用 Disqus，一段代码搞定）
// 在页面里嵌入这段，评论数据全存在 Disqus 服务器
<div id="disqus_thread"></div>
<script>
disqus_config = function () { this.page.url = location.href; this.page.identifier = 'post-123'; };
(function() {
  var d = document, s = d.createElement('script');
  s.src = 'https://yaotu.disqus.com/embed.js';
  s.setAttribute('data-timestamp', +new Date());
  d.head.appendChild(s);
})();
</script>

JAMstack 的优势是"按需付费、零运维"——每个第三方服务都有免费额度，小站点基本不花钱；不用管服务器安全、数据库备份、性能调优，专注做内容就行。缺点是"强依赖第三方"——某服务挂了或涨价，你的功能就受影响。尧图给客户选型时会评估服务的稳定性与可替代性，核心功能（如表单）会准备备选方案。

二、Headless CMS：把内容管理也外包

静态站点最大的痛点是"内容更新要重新构建部署"——运营改个错别字都得找开发。Headless CMS 解决这个问题：它提供一个后台管理界面（像 WordPress 后台那样），内容存它的服务器，前端通过 API 拉取内容。运营在 CMS 后台改文字，前端自动更新（或触发重新构建）。"Headless"意思是"无头"——只提供数据，不管展示，展示由你的前端决定。

// 用 Contentful（主流 Headless CMS）拉取内容
import { createClient } from 'contentful';

const client = createClient({
  space: 'your-space-id',
  accessToken: 'your-access-token'
});

// 拉取文章列表
async function getArticles() {
  const response = await client.getEntries({
    content_type: 'article',     // 内容类型
    order: '-fields.publishDate', // 按发布日期倒序
    limit: 10
  });
  return response.items.map(item => ({
    id: item.sys.id,
    title: item.fields.title,
    excerpt: item.fields.excerpt,
    cover: item.fields.cover?.fields.file.url,
    date: item.fields.publishDate
  }));
}

// 拉取单篇文章
async function getArticle(slug) {
  const response = await client.getEntries({
    content_type: 'article',
    'fields.slug': slug
  });
  if (response.items.length === 0) return null;
  const item = response.items[0];
  return {
    title: item.fields.title,
    body: documentToHtmlString(item.fields.body),  // 富文本转 HTML
    cover: item.fields.cover?.fields.file.url,
    author: item.fields.author?.fields.name
  };
}

// 构建时预拉取（SSG 模式，把 API 数据变成静态 HTML）
export async function getStaticProps() {
  const articles = await getArticles();
  return {
    props: { articles },
    revalidate: 60  // ISR：每 60 秒重新生成（增量静态再生）
  };
}

主流 Headless CMS 有 Contentful、Strapi、Sanity、国内的腾讯云开发。选型看三点：免费额度够不够、API 是否友好、有没有中文界面（运营要用）。尧图给一个建材企业做官网时用了腾讯云开发——运营在后台改产品参数，前端 60 秒内自动更新（ISR 增量再生），全程不用开发介入，也不用碰服务器。

三、无后端方案的设计权衡

无后端不是银弹，它有适用场景也有禁区。判断标准是"业务逻辑是否复杂、数据是否敏感"。纯展示型站点（官网、博客、文档）非常适合；涉及复杂业务规则、敏感数据处理的（电商交易、金融系统）不适合。下表是尧图的项目经验总结：

/*
 * 无后端方案适用性评估表
 * ┌─────────────────────┬────────┬─────────────────────────┐
 * │ 功能需求             │ 适用性  │ 推荐方案                 │
 * ├─────────────────────┼────────┼─────────────────────────┤
 * │ 企业官网/产品展示    │ ★★★★★  │ 纯静态 + Headless CMS    │
 * │ 技术博客/文档站      │ ★★★★★  │ Hexo/Hugo + Git          │
 * │ 营销活动落地页       │ ★★★★★  │ 静态 + Form 服务         │
 * │ 简单电商(少量商品)   │ ★★★☆☆  │ 静态 + Stripe/有赞 API   │
 * │ 论坛/社区            │ ★★☆☆☆  │ 用 Disqus 凑合或换方案   │
 * │ 用户系统/权限管理    │ ★☆☆☆☆  │ 不适合，需自建后端       │
 * │ 复杂交易/库存管理    │ ★☆☆☆☆  │ 不适合，需自建后端       │
 * │ 实时通讯/协同编辑    │ ★☆☆☆☆  │ 不适合，需自建后端       │
 * └─────────────────────┴────────┴─────────────────────────┘
 */

// 无后端站点的安全要点（关键！）
// 1. API Key 绝不能写在前端代码里
// ❌ 错误：Key 暴露在浏览器
const client = createClient({
  space: 'xxx',
  accessToken: 'SECRET_KEY'  // 任何人能从源码看到
});

// ✅ 正确：用只读 Key + 域名白名单
// Contentful 的 delivery API token 本就是只读的，
// 再在后台配置"只允许 ldpk.cn 域名调用"
// 即使 token 泄露，别人也用不了

// 2. 表单防垃圾：用 honeypot 或 reCAPTCHA
<input type="text" name="website" style="display:none">  <!-- 蜜罐字段，机器人会填，人不会 -->
// 提交时如果 website 字段非空，判定为机器人，直接丢弃

// 3. 敏感操作走 Serverless Function
// 如支付回调、订单创建，不能全放前端
// 用 Vercel/Netlify 的 Serverless Function 当"最小后端"

无后端站点的安全关键是"区分只读与写操作"——只读 API（拉文章、查商品）的 token 可以放前端，因为数据本就公开；写操作（下单、改库存）的密钥绝不能放前端，必须用 Serverless Function 包一层。尧图的做法是"前端 + Serverless Function"组合：90% 功能纯前端，10% 敏感逻辑用 Function 兜底，既享受无后端的低成本，又保证敏感操作的安全。

无后端方案的本质是"专业的事交给专业的人"——你专注做内容和前端体验，数据库、服务器、安全防护都交给专业服务。对于内容展示型站点，这是当前性价比最高的方案。理解了 JAMstack 架构、Headless CMS 内容流、安全边界划分，你就能判断哪些项目适合无后端、哪些必须自建后端，做出最合理的技术选型。下一篇我们讲 Serverless 部署，把无后端方案需要的"最小后端"补上。

无后端 JAMstack Headless CMS
返回教程列表