How to get the first elements of an array and then get the next few elements?

I'm building my blog page for my website and I have a posts folder with markdown files of my blogs. I'm just figuring out a way to display all the blogs on a page, but I want to optimize it a bit so it doesn't try to load all blog posts at once but only the first 6 for example. And then when you click on a Load More button the next 6 get loaded and displayed.

This is the code I'm using to get the data from my blog posts:

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;
}

And then display the title of the 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>
  );
}

How would one go about implementing this?

Because I think if I were to call GetBlogPosts(12) it would load 12 posts but also the first 6 which have already been loaded.

You code is perfect.
Just implement pagination during slice method, increase page number as user clicks show more. and slice REQUIRED FILES data only.

Your code would look like this:

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

  !IMPORTANT. sort files array here before slicing, so we wont get repeated posts...

  const posts = files.slice((pageNumber-1)* blogsPerPage,pageNumber*blogsPerPage).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;
}

Now you can implement a state in your functional component and call this function somewhat like this:

export default async function Blogs() {
  const [pageNumber, setPageNumber] = useState(0);

  const posts = await getBlogPosts(6,pageNumber);

  ......
}