Как получить первые элементы массива, а затем получить следующие несколько элементов?

Я создаю свою страницу блога для своего веб-сайта, и у меня есть папка сообщений с файлами уценки моих блогов. Я просто выясняю способ отображения всех блогов на странице, но я хочу немного оптимизировать его, чтобы он не пытался загружать все сообщения блога сразу, а, например, только первые 6. А затем, когда вы нажимаете кнопку «Загрузить еще», следующие 6 загружаются и отображаются.

Это код, который я использую для получения данных из моих сообщений в блоге:

async function getBlogPosts(n: number) {
  const files = fs.readdirSync('posts');

  const posts = files.slice(0, n).map((fileName) => {
    const slug = fileName.replace('.md', '');
    const readFile = fs.readFileSync(`posts/${fileName}`, 'utf-8');
    const { data: frontmatter } = matter(readFile);
    return {
      slug,
      frontmatter,
    };
  });

  return posts;
}

А затем отобразить заголовок сообщений:

export default async function Blogs() {
  const posts = await getBlogPosts(6);

  return (
    <div className = "mx-auto flex">
      {posts.map(({ slug, frontmatter }) => (
        <div
          key = {slug}
          className = "m-2 flex flex-col overflow-hidden rounded-xl border border-gray-200 shadow-lg"
        >
          <Link href = {`/blog/${slug}`}>
            <h3 className = "p-4">{frontmatter.title}</h3>
          </Link>
        </div>
      ))}
    </div>
  );
}

Как бы это реализовать?

Потому что я думаю, что если бы я позвонил GetBlogPosts(12), он загрузил бы 12 сообщений, а также первые 6, которые уже были загружены.