SvelteKit实现分类页SPA复用数据+SSR SEO方案咨询

1. 创建客户端缓存Store #

首先在项目中创建全局Svelte Store，用于缓存分类数据，供SPA跳转时复用：

// src/stores/categories.js
import { writable } from 'svelte/store';

export const categoriesStore = writable(null);

2. 列表页服务端加载数据（满足SEO） #

在/categories/+page.server.js中从数据库获取全部分类数据，服务端渲染阶段执行该逻辑，确保爬虫能抓取到完整内容：

// /categories/+page.server.js
export async function load({ db }) {
  // 替换为你的数据库查询逻辑
  const categories = await db.select('*').from('categories');
  return { categories };
}

3. 列表页渲染并缓存数据到Store #

在/categories/+page.svelte中接收服务端返回的数据，同时将数据同步到客户端Store：

<!-- /categories/+page.svelte -->
<script>
  import { categoriesStore } from '$stores/categories';
  export let data;

  // 将服务端获取的数据存入客户端缓存
  $categoriesStore = data.categories;
</script>

<h1>分类列表</h1>
<ul>
  {#each data.categories as category}
    <!-- 使用SvelteKit原生链接触发SPA导航 -->
    <li><a href="/categories/{category.id}">{category.name}</a></li>
  {/each}
</ul>

4. 详情页双加载逻辑（SEO+SPA复用） #

4.1 服务端加载（支持直接访问/SEO）

在/categories/[id]/+page.server.js中实现单个分类的查询逻辑，确保用户直接访问详情URL或爬虫抓取时能获取数据：

// /categories/[id]/+page.server.js
export async function load({ params, db }) {
  // 替换为你的数据库单条查询逻辑
  const category = await db.select('*').from('categories').where('id', params.id).first();
  return { category };
}

4.2 客户端优先复用缓存

在/categories/[id]/+page.js中实现客户端加载逻辑，优先从缓存Store取数据，避免SPA跳转时的冗余请求：

// /categories/[id]/+page.js
import { categoriesStore } from '$stores/categories';

export async function load({ params, parent }) {
  // 从缓存获取已加载的分类列表
  const cachedCategories = $categoriesStore;
  
  if (cachedCategories) {
    // 在缓存中匹配当前ID的分类
    const matchedCategory = cachedCategories.find(cat => cat.id === params.id);
    if (matchedCategory) {
      // 缓存命中，直接返回数据
      return { category: matchedCategory };
    }
  }

  // 缓存未命中（如用户直接访问详情页），降级调用服务端加载逻辑
  const serverData = await parent();
  return serverData;
}

5. 详情页渲染数据 #

在/categories/[id]/+page.svelte中直接使用返回的分类数据：

<!-- /categories/[id]/+page.svelte -->
<script>
  export let data;
</script>

<h1>{data.category.name}</h1>
<div>{data.category.description}</div>

核心逻辑说明 #

• 服务端+page.server.js保留完整查询逻辑，确保爬虫和直接访问场景下的SEO需求。
• SPA跳转时，客户端优先读取缓存Store中的数据，消除网络延迟和重复请求。
• 缓存未命中时自动降级到服务端加载，不影响用户直接访问详情页的体验。

内容的提问来源于stack exchange，提问作者papas-source