Why should I use renderToStream instead of renderToString?

renderToStream sends HTML chunks to the browser as they are generated, which significantly improves Time to First Byte (TTFB) and perceived performance compared to waiting for the full string.

What is the difference between render and hydrate in SolidJS?

The render function is used for fresh client-side mounting in SPAs, whereas hydrate attaches interactivity and event listeners to HTML that has already been rendered by the server.

How do I ensure code only runs on the client or server?

You can use the 'isServer' boolean imported from 'solid-js/web' to wrap environment-specific logic, preventing browser-only APIs from breaking your server-side build.

Does SolidJS require a function in the render method?

Yes, a common mistake is passing JSX directly. You must provide a function, such as 'render(() => , element)', to maintain proper reactivity and disposal.

SolidJS Core Rendering

Name: SolidJS Core Rendering
Author: vallafederico

byvallafederico

0•

開発者ツール

Implements and optimizes SolidJS rendering patterns including client-side mounting, server-side hydration, and streaming SSR.

This skill provides specialized guidance for mastering SolidJS rendering strategies across various environments. It enables developers to correctly implement client-side rendering (CSR), server-side rendering (SSR), and hydration while avoiding common pitfalls like hydration mismatches or incorrect JSX mounting. By providing implementation patterns for asynchronous rendering, streaming for faster time-to-first-byte, and environment-specific logic using isServer checks, this skill ensures that SolidJS applications are performant, SEO-friendly, and architecturally sound.

主な機能

010 GitHub stars

02Performance-optimized renderToStream configuration for faster TTFB

03Hydration script generation and management for seamless SSR transitions

04Correct implementation of client-side render and hydrate methods

05Environment-aware logic using isServer for isomorphic code development

06Server-side rendering setup using renderToString and renderToStringAsync

ユースケース

01Migrating a SolidJS Single Page App (SPA) to a Server-Side Rendered (SSR) architecture

02Implementing high-performance streaming for data-heavy dashboard applications

03Debugging hydration mismatches and DOM structure inconsistencies between server and client

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