skills.rest
farming-labs
farming-labsOFFICIAL
Explore all skills by this author →
Website𝕏@KinfishTGitHub

rendering-patterns

Determine optimal web rendering strategies for apps based on SEO and data dynamics.

35|5|Updated Feb 5, 2026
One-click install
npx skills add https://github.com/farming-labs/fm-skills --skill rendering-patterns-farming-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rendering-patterns
Source: https://github.com/farming-labs/fm-skills/tree/main/rendering-patterns
Command: npx skills add https://github.com/farming-labs/fm-skills --skill rendering-patterns-farming-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams analyze and select the most suitable web rendering pattern (CSR, SSR, SSG, ISR, or streaming) to optimize performance, SEO, and user experience across diverse applications.

Core Features & Use Cases

  • Pattern overview: CSR, SSR, SSG, ISR, and streaming with trade-offs explained.
  • Decision guidance: when to use each pattern based on SEO needs, data freshness, and interactivity.
  • Performance & delivery: guidance on metrics like TTFB, FCP, and streaming benefits; integration considerations.
  • Use cases: dashboards needing interactivity (CSR), marketing pages needing SEO (SSR/SSG), content sites with updates (ISR), long pages with progressive rendering (Streaming).
  • Implementation planning: how to map a real project to a chosen pattern and a minimal hydration strategy.

Quick Start

  • Analyze a page and decide the rendering pattern best suited for SEO and interactivity.
  • Outline the implementation steps for the chosen pattern in a concise plan.
  • Example prompt: For a marketing blog with frequent updates and SEO requirements, propose an SSG/ISR hybrid and a hydration strategy.

Frequently Asked Questions about rendering-patterns

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

FAQPage Schema
How do I choose between SSG and ISR for a frequently updated marketing blog?▼

Choosing a web rendering pattern requires analyzing SEO requirements, data dynamics, and interactivity needs. CSR suits interactive dashboards, while SSR or SSG is better for marketing pages requiring strong SEO and fast initial content delivery.

Does streaming rendering help improve TTFB and FCP for long web pages?▼

For a frequently updated marketing blog, choosing between SSG and ISR depends on data freshness. SSG requires full site rebuilds for content updates, whereas ISR allows incremental static regeneration at runtime, providing updated pages without full rebuilds.

When should I avoid using CSR for my web application architecture?▼

Streaming rendering improves TTFB and FCP for long pages by sending HTML chunks progressively, allowing the browser to paint content immediately. This avoids blocking the initial render until all page data is fully resolved.

How do I map an existing web project to a new rendering strategy?▼

Avoid CSR when your application demands strong SEO or fast initial content visibility. CSR delays rendering until JavaScript loads, hurting TTFB and FCP metrics, making it unsuitable for content-heavy marketing sites requiring immediate search engine indexing.

How do I map an existing web project to a new rendering strategy?▼

To map a project to a new rendering strategy, analyze data-fetching needs, branding requirements, and hosting constraints. Use these functional inputs to generate a concrete implementation plan outlining the chosen pattern and a minimal hydration strategy.

Related Skills

Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
alkalisummeralkalisummer
1

rendering-patterns

Explain CSR, SSR, SSG, ISR, and streaming for Next.js and Remix.

Community
Intermediate
ManzuetiManzueti

benchmark

Capture and compare browser performance metrics to detect regressions and track trends.

Community
Advanced
grvpanchalgrvpanchal
1

server-ssg

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

Community
Advanced