solid-core-rendering
SolidJS rendering: render for client apps, hydrate for SSR, renderToString for server rendering, renderToStream for streaming, isServer checks.
Best use case
solid-core-rendering is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
SolidJS rendering: render for client apps, hydrate for SSR, renderToString for server rendering, renderToStream for streaming, isServer checks.
Teams using solid-core-rendering should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/solid-core-rendering/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How solid-core-rendering Compares
| Feature / Agent | solid-core-rendering | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
SolidJS rendering: render for client apps, hydrate for SSR, renderToString for server rendering, renderToStream for streaming, isServer checks.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# SolidJS Rendering Utilities
Complete guide to rendering SolidJS applications. Understand client-side rendering, SSR, hydration, and streaming.
## render - Client-Side Rendering
Mount your Solid app to the DOM. Essential browser entry point for SPAs.
```tsx
import { render } from "solid-js/web";
const dispose = render(() => <App />, document.getElementById("app")!);
// Later, unmount
dispose();
```
**Key points:**
- First argument must be a **function** (not JSX directly)
- Element should be empty (render appends, dispose removes all)
- Returns dispose function to unmount
**Correct usage:**
```tsx
// ✅ Correct - function
render(() => <App />, element);
// ❌ Wrong - JSX directly
render(<App />, element);
```
## hydrate - SSR Hydration
Hydrate server-rendered HTML with client-side code. Essential for SSR apps.
```tsx
import { hydrate } from "solid-js/web";
const dispose = hydrate(() => <App />, document.getElementById("app")!);
```
**Key points:**
- Rehydrates existing DOM
- Matches server-rendered structure
- Attaches interactivity
- Used in SSR applications
**Options:**
```tsx
hydrate(() => <App />, element, {
renderId: "app", // Optional render ID
owner: undefined, // Optional owner context
});
```
## renderToString - Server Rendering
Render components to HTML string for SSR.
```tsx
import { renderToString } from "solid-js/web";
const html = renderToString(() => <App />);
// Returns: "<div>...</div>"
```
**Use cases:**
- SSR initial render
- Static site generation
- Email templates
- Server-side HTML generation
## renderToStringAsync - Async Rendering
Render components with async data to HTML string.
```tsx
import { renderToStringAsync } from "solid-js/web";
const html = await renderToStringAsync(() => <App />);
// Waits for async resources
```
**Use cases:**
- SSR with async data
- Resources and Suspense
- Async components
## renderToStream - Streaming SSR
Stream HTML to client for faster time-to-first-byte.
```tsx
import { renderToStream } from "solid-js/web";
const stream = renderToStream(() => <App />);
// Pipe to response
stream.pipeTo(response);
```
**Benefits:**
- Faster initial render
- Progressive HTML delivery
- Better perceived performance
## HydrationScript / generateHydrationScript
Bootstrap hydration before Solid runtime loads.
```tsx
import { HydrationScript, generateHydrationScript } from "solid-js/web";
// As component (JSX)
<HydrationScript nonce={nonce} eventNames={["click", "input"]} />
// As string (manual HTML)
const script = generateHydrationScript({
nonce,
eventNames: ["click", "input"],
});
```
**Purpose:**
- Sets up hydration on client
- Required for SSR apps
- Place once in `<head>` or before closing `</body>`
## isServer - Environment Check
Check if code is running on server.
```tsx
import { isServer } from "solid-js/web";
if (isServer) {
// Server-only code
console.log("Running on server");
} else {
// Client-only code
console.log("Running on client");
}
```
**Use cases:**
- Conditional server/client code
- Environment-specific logic
- Avoiding browser APIs on server
## Common Patterns
### Client Entry Point
```tsx
// entry-client.tsx
import { render } from "solid-js/web";
import App from "./App";
render(() => <App />, document.getElementById("app")!);
```
### SSR Entry Point
```tsx
// entry-server.tsx
import { renderToString, generateHydrationScript } from "solid-js/web";
import App from "./App";
export default function handler(req, res) {
const html = renderToString(() => <App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
${generateHydrationScript()}
</head>
<body>
<div id="app">${html}</div>
</body>
</html>
`);
}
```
### Client Hydration
```tsx
// entry-client.tsx
import { hydrate } from "solid-js/web";
import App from "./App";
hydrate(() => <App />, document.getElementById("app")!);
```
### Streaming SSR
```tsx
import { renderToStream } from "solid-js/web";
export default async function handler(req, res) {
const stream = renderToStream(() => <App />);
res.setHeader("Content-Type", "text/html");
stream.pipeTo(res);
}
```
### Environment-Specific Code
```tsx
import { isServer } from "solid-js/web";
function Component() {
if (isServer) {
// Server-only initialization
return <div>Server rendered</div>;
}
// Client-only code
const [mounted, setMounted] = createSignal(false);
onMount(() => setMounted(true));
return <div>Client: {mounted()}</div>;
}
```
## Best Practices
1. **Always use function form:**
- `render(() => <App />, element)`
- Not `render(<App />, element)`
2. **Empty mount element:**
- Element should be empty
- Render appends, dispose removes all
3. **Hydration matching:**
- Server and client must match
- Same structure and content
4. **Use isServer checks:**
- Avoid browser APIs on server
- Conditional logic when needed
5. **Streaming for performance:**
- Use renderToStream for SSR
- Faster time-to-first-byte
## Summary
- **render**: Client-side mounting
- **hydrate**: SSR hydration
- **renderToString**: Server HTML generation
- **renderToStringAsync**: Async server rendering
- **renderToStream**: Streaming SSR
- **HydrationScript / generateHydrationScript**: Hydration setup
- **isServer**: Environment detectionRelated Skills
solidstart-websocket
SolidStart WebSocket: experimental WebSocket endpoints, connection handling, message events, real-time communication, bidirectional data flow.
solidstart-api-routes
SolidStart API routes: export GET/POST/PATCH/DELETE functions, handle APIEvent with request/params/fetch, GraphQL and tRPC integration, session management.
solidjs
Builds UIs with SolidJS including signals, effects, memos, and fine-grained reactivity. Use when creating high-performance reactive applications, building without virtual DOM, or needing granular updates.
solid-generic
SOLID principles for generic TypeScript, Bun, and Node.js projects. Files < 100 lines, interfaces separated, JSDoc mandatory. Use for CLI tools, libraries, scripts, hooks, and non-framework TypeScript code.
rust-core
Comprehensive Rust development expertise covering core principles, patterns, error handling, async programming, testing, and performance optimization. Use when working on Rust projects requiring guidance on: (1) Language fundamentals (ownership, lifetimes, borrowing), (2) Architectural decisions and design patterns, (3) Web development (Axum, Actix-web, Rocket), (4) AI/LLM integration, (5) CLI/TUI applications, (6) Desktop development with Tauri, (7) Async/await and concurrency, (8) Error handling strategies, (9) Testing and benchmarking, (10) Performance optimization, (11) Logging and observability, or (12) Code reviews and best practices.
python-core
Create, write, build, debug, test, refactor, and optimize Python 3.10+ applications across all domains (data science, backend APIs, scripting, automation). Manage dependencies with uv (preferred), poetry, or pip. Implement type hints (typing module, generics, protocols), write tests with pytest (fixtures, parametrize, mocking), work with pandas DataFrames (creation, selection, groupby, merge), use dataclasses and decorators, handle errors with logging integration, and follow TDD workflows (Red-Green-Refactor). Configure virtual environments, pyproject.toml, and static analysis tools (mypy, pyright). Use when implementing Python features, fixing bugs, writing tests, managing packages, analyzing data, or building Python projects.
playwright-core
Battle-tested Playwright patterns for E2E, API, component, visual, accessibility, and security testing. Covers locators, assertions, fixtures, network mocking, auth flows, debugging, and framework recipes for React, Next.js, Vue, and Angular. TypeScript and JavaScript.
IFCore
Use when developing on the IFCore compliance checker. Covers contracts, check function conventions, issue reporting, app structure, and development patterns.
core-platform-notion-reviewer
Core Platform Team의 Notion 문서를 문서 타입(테크스펙/시스템설계/시스템소개/액션아이템/아이디어)과 17개 품질 기준에 따라 리뷰하고 개선안을 제안합니다. Notion MCP를 통해 문서 읽기/수정/검색을 수행합니다. 사용자가 Notion 문서 리뷰, 문서 품질 검사, Notion 페이지 개선 요청을 할 때 사용하세요.
core-life-ops
Core productivity workflows (daily planning, task triage, reporting) that work across any life domain. Not intended for direct use - imported by context-specific skills like covenant-marketing-ops or personal-life-ops.
core-development
Master core development paths - Frontend, Backend, Full Stack, DevOps. Atomic skill for learning sequences and technology stack recommendations.
convex-core
Core Convex development guidelines - functions, validators, schema, queries, mutations, and database patterns