Why does SolidJS rendering require a function for the component argument?

SolidJS requires a function (e.g., () => ) so it can lazily initialize the reactive system and properly track dependencies within the rendering root.

When should I use renderToStream instead of renderToString?

Use renderToStream for production SSR to improve performance by sending HTML to the browser as it's generated, rather than waiting for the entire string to be built.

What is the difference between render and hydrate in SolidJS?

The render function is used for client-side mounting in SPAs, while hydrate is specifically designed to attach event listeners and interactivity to HTML already rendered by the server.

How do I prevent browser-only APIs from breaking my SolidJS SSR app?

Import the isServer boolean from solid-js/web to wrap environment-specific logic, ensuring browser-only APIs like 'window' or 'document' are not called during server execution.

SolidJS Core Rendering

Name: SolidJS Core Rendering
Author: vallafederico

byvallafederico

0•

デザインツール

Optimizes SolidJS application performance by implementing correct client-side rendering, hydration, and streaming SSR patterns.

SolidJS Core Rendering is a specialized Claude Code skill designed to help developers master the framework's rendering lifecycle. It provides comprehensive guidance on Client-Side Rendering (CSR), Server-Side Rendering (SSR), and hydration strategies to ensure high-performance web applications. The skill covers essential patterns for entry-point configuration, streaming HTML for faster Time-to-First-Byte (TTFB), and environment-specific logic using the isServer utility, helping developers avoid common pitfalls like hydration mismatches and incorrect JSX execution.

主な機能

01Progressive HTML delivery via renderToStream for better performance

02SSR Hydration strategies for seamless client-server transitions

03Async server rendering and string generation for SEO-friendly content

04Expert implementation of Client-Side Rendering (CSR) and unmounting

050 GitHub stars

06Environment detection patterns using isServer for isomorphic code

ユースケース

01Implementing hydration scripts to bootstrap interactivity on pre-rendered pages

02Optimizing large applications with streaming SSR to improve perceived loading speed

03Configuring entry-client.tsx and entry-server.tsx for SSR applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vallafederico/solid-ai-rules solid-core-rendering

For use in Claude.ai and ChatGPT

Download Skill