能否不使用SvelteKit，将Svelte与Contentful结合？求经验分享

当然可以不用SvelteKit，直接基于纯Svelte项目对接Contentful，很多开发者已经实现了这类场景，下面是实用的落地技巧、注意要点和示例：

一、基础集成步骤 #

• 安装Contentful官方JS SDK：

  npm install contentful
  

• 项目内创建Contentful客户端实例（比如src/lib/contentful.js）：

  import { createClient } from 'contentful';
  
  // 注意：公开场景用CDN API密钥，管理密钥仅用于服务器端操作，绝对不能暴露在前端
  export const client = createClient({
    space: '你的Space ID',
    accessToken: '你的CDN API密钥'
  });
  

二、核心技巧与注意事项 #

1. 数据获取时机 #

• 客户端实时拉取：在组件初始化时通过onMount钩子请求数据：

  <script>
    import { onMount } from 'svelte';
    import { client } from '$lib/contentful';
    let articles = [];
  
    onMount(async () => {
      // 根据内容类型筛选数据
      const res = await client.getEntries({ content_type: 'article' });
      articles = res.items;
    });
  </script>
  
  {#each articles as article}
    <article>
      <h2>{article.fields.title}</h2>
      <p>{article.fields.summary}</p>
    </article>
  {/each}
  

• 构建前预渲染静态数据：如果是静态站点，可在构建前拉取Contentful数据生成本地JSON，避免客户端重复请求：
  新建scripts/fetch-content.js：

  import { client } from '../src/lib/contentful';
  import fs from 'fs/promises';
  
  async function fetchAndSaveData() {
    const articles = await client.getEntries({ content_type: 'article' });
    await fs.writeFile('src/data/articles.json', JSON.stringify(articles.items));
  }
  
  fetchAndSaveData();
  

  在package.json的scripts中添加：

  "prebuild": "node scripts/fetch-content.js"
  

  这样每次构建前会自动拉取最新数据，组件直接读取本地JSON即可。

2. Contentful字段处理 #

• Rich Text解析：用@contentful/rich-text-html-renderer将富文本转为HTML：

  npm install @contentful/rich-text-html-renderer
  

  组件内使用：

  import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
  
  // 渲染富文本内容
  const articleContent = documentToHtmlString(article.fields.content);
  

  在Svelte中通过{@html articleContent}渲染解析后的HTML。
• 媒体资源处理：图片等资源需拼接完整URL，或直接用SDK方法生成：

  // 手动拼接URL
  const imageUrl = `https:${article.fields.coverImage.fields.file.url}`;
  // 或用SDK内置方法
  const imageUrl = client.assetUrl(article.fields.coverImage);
  

3. 性能优化 #

• 前端本地缓存：用localStorage缓存API响应，减少重复请求：

  async function getArticles() {
    const cacheKey = 'contentful_articles';
    const cachedData = localStorage.getItem(cacheKey);
    if (cachedData) return JSON.parse(cachedData);
  
    const res = await client.getEntries({ content_type: 'article' });
    localStorage.setItem(cacheKey, JSON.stringify(res.items));
    return res.items;
  }
  

• 利用Contentful CDN缓存：API请求默认会被Contentful的CDN缓存，可通过设置请求参数的cache-control头或使用缓存标签策略进一步优化。

三、常见落地场景 #

• 静态博客：构建前预渲染所有博客内容，生成纯静态HTML部署，速度快且无服务器成本
• 动态产品展示页：客户端实时拉取Contentful的产品数据，后台更新内容后前端无需重新部署即可同步

内容的提问来源于stack exchange，提问作者lou_weez