How do I handle code that should only run on the server?

You can use the 'isServer' import from 'solid-js/web' to wrap server-only initialization. Modern bundlers will use this constant to perform dead code elimination for your client-side bundles.

How does renderToStream() improve performance?

renderToStream() enables progressive rendering, allowing the server to start sending HTML to the browser before the entire page is generated, which significantly improves the Time to First Byte (TTFB).

When should I use renderToStringAsync()?

Use renderToStringAsync() when your application needs to resolve asynchronous data fetching or Suspense boundaries on the server before sending the final HTML string to the client.

What is the difference between render() and hydrate() in SolidJS?

The render() function is used for fresh client-side mounting in SPAs, whereas hydrate() is specifically designed to attach event listeners to HTML that has already been rendered by the server.

SolidJS Rendering & SSR

Name: SolidJS Rendering & SSR
Author: vallafederico

byvallafederico

0•

開発者ツール

Optimizes SolidJS application performance through expert implementation of client-side rendering, server-side hydration, and progressive HTML streaming.

This skill equips Claude with specialized knowledge for architecting high-performance SolidJS applications using various rendering strategies. It provides standardized patterns for client-side mounting, server-side rendering (SSR), and hydration, ensuring seamless transitions between server-rendered HTML and client-side interactivity. By guiding the implementation of advanced features like asynchronous rendering for Suspense, progressive streaming for faster TTFB, and environment detection using isServer, this skill helps developers avoid hydration mismatches and build highly optimized, SEO-friendly web applications.

主な機能

01Environment-aware code branching using isServer and DEV constants.

020 GitHub stars

03Best practices for avoiding hydration mismatches and using stable unique IDs.

04Efficient SSR hydration patterns to sync server-rendered DOM with client logic.

05Standardized client-side rendering (CSR) setup with proper reactive tracking.

06Support for asynchronous string rendering and progressive HTML streaming.

ユースケース

01Building SEO-optimized SolidJS applications with server-side rendering.

02Migrating existing SPAs to SSR or hybrid rendering architectures.

03Implementing progressive enhancement via hydration scripts and streaming.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill