Building Fast Web Experiences with Next.js and React Server Components

Modern web development demands both great user experience and excellent performance. Next.js with the App Router and React Server Components (RSC) gives you both — if you know how to use them effectively.

Server Components vs Client Components

The App Router introduces a clear split:

• Server Components run on the server, have zero client JavaScript cost, and can directly access databases and file systems

• Client Components (marked with "use client") handle interactivity like forms, animations, and browser APIs

// Server Component — no "use client" directive
async function BlogList() {
  const posts = await getAllPosts()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>{post.title}</li>
      ))}
    </ul>
  )
}

Key Performance Patterns

1. Colocate data fetching

Fetch data where you need it, rather than prop-drilling from a top-level loader. Next.js automatically deduplicates identical requests within a render.

2. Stream with Suspense

Wrap slow components in <Suspense> boundaries so the page shell renders immediately while data loads.

3. Static generation where possible

Use generateStaticParams for content that doesn't change often — blog posts, documentation, product pages.

Content Rendering Pipeline

For this portfolio, blog posts are stored as local Markdown files and rendered through a markdown → TipTap → HTML pipeline:

1. Read markdown from content/blogs/

2. Parse frontmatter with gray-matter

3. Convert markdown to TipTap JSON via marked + @tiptap/html

4. Render TipTap JSON to semantic HTML

5. Display with syntax highlighting via Prism.js

This replaces the previous Hashnode GraphQL integration with a fully local, version-controlled content workflow.

Conclusion

The combination of Server Components, static generation, and smart caching makes Next.js an excellent choice for content-heavy sites. Start by identifying what can run on the server, then add client interactivity only where needed.