skills.rest
whddltjdwhd
whddltjdwhdCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

bellog-rsc

Guide Bellog developers to choose Server Components over Client Components in Next.js.

2|Updated Feb 17, 2025
Search Tags:#performance#react#next.js#server-components#client-components#component-design
One-click install
npx skills add https://github.com/whddltjdwhd/bellog --skill bellog-rsc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bellog-rsc
Source: https://github.com/whddltjdwhd/bellog/tree/main/.claude/skills/bellog-rsc
Command: npx skills add https://github.com/whddltjdwhd/bellog --skill bellog-rsc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Bellog skill helps teams decide when to use Server Components vs Client Components during component creation, optimizing performance and SEO while reducing client-side complexity.

Core Features & Use Cases

  • Default-to-server rule for Bellog apps to minimize client JS
  • Clear decision criteria for interactivity, browser APIs, and hooks
  • Examples of server vs client usage within Bellog's Next.js architecture

Quick Start

Apply the default Server Component rule when adding a new Bellog component, and mark it as a Client Component only if interactivity or browser APIs are required.

Frequently Asked Questions about bellog-rsc

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
When should I use Server Components vs Client Components in Next.js?▼

Choose Server Components by default to minimize client JS and optimize performance. Only switch to Client Components when your UI requires user interactivity, browser APIs, or React hooks, keeping client-side complexity low.

How do I decide on a rendering strategy for new Next.js components?▼

Apply a default-to-server rule when creating new components. Evaluate if the component needs browser APIs or hooks; if not, keep it as a Server Component to automatically optimize SEO and reduce client-side complexity.

What is the default-to-server rule for Next.js component design?▼

The default-to-server rule enforces creating all new components as Server Components initially. This minimizes client-side JavaScript, improving performance and SEO, unless explicit criteria for client-side rendering like hooks are met.

Why does my Next.js app have high client-side complexity?▼

High client-side complexity often results from overusing Client Components. Enforcing a default-to-server rule for pages and UI widgets reduces client JS, shifting rendering to the server to optimize performance.

Can I use React hooks in Next.js Server Components?▼

No, React hooks and browser APIs require Client Components. The decision flow marks any component needing interactivity or hooks as a Client Component, while keeping all other UI widgets as Server Components by default.

Related Skills

Explore More Software Engineering Skills→
etylsarinetylsarin
59

nextjs-framework

Apply Next.js App Router best practices for rendering, caching, and deployment.

Community
Intermediate
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced
Kgan01Kgan01
6

react-nextjs

Guide React and Next.js app building with App Router and Zustand.

Community
Intermediate
grvpanchalgrvpanchal
1

server-ssg

Manage static site generation with pre-rendering and fallback strategies.

Community
Advanced