Optimize blog post loading with asynchronous file I/O in getStaticProps.
Currently, the blog post data is being read synchronously inside getStaticProps like this: In Community index.page.tsx file:
This synchronous file reading blocks the event loop and slows down the static generation process, especially when there are multiple markdown files.
Proposed Solution: Use asynchronous file operations and parallelize them with Promise.all to improve performance and scalability.
const files = await fs.promises.readdir(PATH);
const markdownFiles = files.filter((f) => f.endsWith('.md'));
const blogPosts = await Promise.all(
markdownFiles.map(async (fileName) => {
const slug = fileName.replace('.md', '');
const fullFileName = await fs.promises.readFile(${PATH}/${slug}.md, 'utf-8');
const { data: frontmatter, content } = matter(fullFileName);
return { slug, frontmatter, content };
})
);
This approach ensures faster build times and non-blocking I/O operations.
Please assign this issue to me, I’d like to refactor this logic to use asynchronous file reading for better performance and maintainability. @Utkarsh-123github @vtushar06
Nice catch, @SHASHI9705 — switching to async file reads with Promise.all makes sense here. It’s a clean optimization that can help speed up static generation, especially as the blog grows. Utkarsh-123github — what do you think about assigning this one?
yes, i am waiting for @Utkarsh-123github to review this then i can start working on this.