AstroJS SSR模式下如何实现分页？

在SSR模式下，getStaticPaths和官方paginate函数确实无法使用，你需要通过URL路由参数直接获取页码，并手动实现分页逻辑，具体步骤如下：

1. 获取当前页码 #

在blog/[page].astro中，通过Astro.params读取URL路径中的page参数，同时处理非数字或无效页码的情况：

---
// blog/[page].astro
// 解析当前页码，默认值设为1
const currentPage = Number(Astro.params.page) || 1;
// 定义每页显示的文章数量
const postsPerPage = 10;
---

2. 实现核心分页逻辑 #

从你的数据源（数据库、API等）获取总文章数，计算总页数，再查询当前页的文章列表：

---
// 接上面的代码
// 示例：自定义函数获取总文章数（根据你的实际数据源实现）
const totalPosts = await fetchTotalBlogPosts();
// 计算总页数
const totalPages = Math.ceil(totalPosts / postsPerPage);

// 处理无效页码：如果页码小于1或大于总页数，重定向到第一页或返回404
if (currentPage < 1 || currentPage > totalPages) {
  return Astro.redirect('/blog/1', 302);
}

// 查询当前页的文章列表（根据你的数据源调整参数）
const currentPagePosts = await fetchBlogPosts({
  limit: postsPerPage,
  offset: (currentPage - 1) * postsPerPage
});
---

3. 渲染分页内容与导航 #

在页面模板中渲染文章列表和分页导航按钮：

<!-- 文章列表 -->
<h2>博客列表 - 第 {currentPage} 页</h2>
<ul>
  {currentPagePosts.map(post => (
    <li key={post.id}>
      <a href={`/blog/${post.slug}`}>{post.title}</a>
    </li>
  ))}
</ul>

<!-- 分页导航 -->
<div class="pagination">
  <!-- 上一页按钮 -->
  {currentPage > 1 && (
    <a href={`/blog/${currentPage - 1}`}>← 上一页</a>
  )}
  
  <!-- 页码按钮 -->
  {Array.from({ length: totalPages }, (_, idx) => idx + 1).map(pageNum => (
    <a 
      key={pageNum}
      href={`/blog/${pageNum}`}
      class={pageNum === currentPage ? 'active' : ''}
    >
      {pageNum}
    </a>
  ))}
  
  <!-- 下一页按钮 -->
  {currentPage < totalPages && (
    <a href={`/blog/${currentPage + 1}`}>下一页 →</a>
  )}
</div>

关键说明 #

• SSR模式下，路由参数通过Astro.params获取，而非SSG模式的Astro.props，这是两者核心区别。
• 无需依赖官方paginate函数，手动计算offset和limit即可实现数据分页。
• 务必处理无效页码的边界情况，避免出现空页面或报错。

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