website icon indicating copy to clipboard operation
website copied to clipboard

Optimize blog post loading with asynchronous file I/O in getStaticProps.

Open SHASHI9705 opened this issue 1 month ago • 2 comments

Currently, the blog post data is being read synchronously inside getStaticProps like this: In Community index.page.tsx file:

Image

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

SHASHI9705 avatar Nov 11 '25 05:11 SHASHI9705

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?

vtushar06 avatar Nov 13 '25 06:11 vtushar06

yes, i am waiting for @Utkarsh-123github to review this then i can start working on this.

SHASHI9705 avatar Nov 16 '25 13:11 SHASHI9705