基于Vue&Laravel的无限滚动用户Feed去重架构方案咨询

核心解决方案：游标分页替代传统偏移分页 #

传统offset分页的本质问题是：Feed按时间倒序排列时，新发布的帖子会插入到列表顶部，导致后续请求的offset对应的内容被“挤后”，最终出现重复。基于时间戳+ID的游标分页是架构层面低复杂度、低开销的最优解，它通过定位最后一条已加载内容的位置，精准获取下一批旧内容，完全避免重复。

各思路优劣对比 #

针对你提到的几种思路，实际场景中的表现如下：

• 会话缓存已发帖子去重：需要在前端或后端维护已返回帖子ID的集合，随着滚动次数增加，集合会越来越大，SQL的NOT IN子句会严重影响性能，且多端登录时会话缓存不共享，容易出现遗漏或重复。
• SQL排除已返回帖子：和缓存思路类似，每次请求携带大量ID参数，请求体体积增大，SQL性能随数据量下降明显，复杂度高。
• 实时更新新帖：用WebSocket推送新帖到Feed顶部能提升体验，但无法解决滚动加载时的重复问题，仅作为补充方案。
• 跟踪已获取时间戳：是游标分页的简化版，但如果存在同一时间戳的多条帖子，会出现漏加载或重复，必须配合ID作为兜底条件。
• 组合方案：游标分页+实时新帖推送，兼顾无重复加载和实时体验，是最推荐的组合。

具体实现步骤 #

后端（Laravel） #

修改Feed接口，接收游标参数并构建精准查询：

public function getFeed(Request $request)
{
    $perPage = 20;
    // 基础Feed筛选逻辑：替换为你的好友、关注、可见性、话题标签判定
    $query = Post::query()
        ->whereIn('user_id', auth()->user()->following()->pluck('id')->push(auth()->id()))
        ->where('visibility', 'public')
        ->orderBy('created_at', 'desc')
        ->orderBy('id', 'desc');

    // 处理游标参数，定位下一批内容
    if ($request->filled(['last_created_at', 'last_id'])) {
        $lastCreatedAt = \Carbon\Carbon::parse($request->last_created_at);
        $lastId = $request->last_id;
        
        $query->where(function ($q) use ($lastCreatedAt, $lastId) {
            $q->where('created_at', '<', $lastCreatedAt)
              ->orWhere(function ($q2) use ($lastCreatedAt, $lastId) {
                  $q2->where('created_at', '=', $lastCreatedAt)
                     ->where('id', '<', $lastId);
              });
        });
    }

    $posts = $query->take($perPage)->get();

    return response()->json([
        'posts' => $posts,
        'has_more' => $posts->count() === $perPage,
        'last_created_at' => $posts->last()?->created_at->toIso8601String(),
        'last_id' => $posts->last()?->id
    ]);
}

性能优化：给posts表添加联合索引，加速游标查询：

CREATE INDEX posts_created_at_id ON posts(created_at DESC, id DESC);

前端（Vue） #

维护游标状态，滚动时携带参数请求：

<template>
  <div class="feed-container" @scroll="handleScroll">
    <div v-for="post in feedPosts" :key="post.id" class="post-card">
      <!-- 帖子内容渲染 -->
    </div>
    <div v-if="isLoading" class="loading-tip">加载中...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const feedPosts = ref([]);
const isLoading = ref(false);
let hasMorePosts = ref(true);
let lastCreatedAt = null;
let lastPostId = null;

const fetchFeedPage = async () => {
  if (isLoading.value || !hasMorePosts.value) return;
  isLoading.value = true;

  try {
    const params = {};
    if (lastCreatedAt && lastPostId) {
      params.last_created_at = lastCreatedAt;
      params.last_id = lastPostId;
    }

    const response = await axios.get('/api/feed', { params });
    feedPosts.value.push(...response.data.posts);
    hasMorePosts.value = response.data.has_more;
    lastCreatedAt = response.data.last_created_at;
    lastPostId = response.data.last_id;
  } catch (error) {
    console.error('Feed加载失败:', error);
  } finally {
    isLoading.value = false;
  }
};

const handleScroll = (e) => {
  const container = e.target;
  // 距离底部100px时触发加载
  if (container.scrollTop + container.clientHeight >= container.scrollHeight - 100) {
    fetchFeedPage();
  }
};

onMounted(() => {
  fetchFeedPage();
});
</script>

可选：实时新帖补充 #

如果需要实时显示新发布的帖子，可通过Laravel Echo监听post.created事件，将新帖插入Feed顶部，无需修改游标参数（游标仅用于加载旧内容）：

// Vue组件中添加实时监听
import Echo from 'laravel-echo';

onMounted(() => {
  fetchFeedPage();
  
  Echo.channel('feed.' + auth().user.id)
    .listen('PostCreated', (event) => {
      // 避免重复插入（如果新帖已经通过滚动加载）
      const exists = feedPosts.value.some(post => post.id === event.post.id);
      if (!exists) {
        feedPosts.value.unshift(event.post);
      }
    });
});

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