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

Open Beginner friendly
#1,907 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Refactor
Clarity
Clearly specified
Activity status
Stale
Tech stack
next.js, node.js, typescript
Domain
build-system, performance, web-dev

Research direction

Start in the Community index.page.tsx file and inspect how blog post markdown files are currently read inside getStaticProps. Replace the synchronous directory and file reads with the proposed asynchronous flow, then verify that all posts and frontmatter still load correctly during static generation.

Written by the indexing model from the issue text.

Description

Status: Triage

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

Dominant language
HTML
Stars
169
Forks
484
Avg merge
7h 58m
Merged PRs (30d)
6

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from json-schema-org/website

All issues in json-schema-org/website

Similar issues

More Build System issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.