Skip to content

Commit 1e286a4

Browse files
katywingskatywings
committed
chore: implement solid example
1 parent ba5147a commit 1e286a4

12 files changed

Lines changed: 1410 additions & 106 deletions

File tree

‎docs/4.examples/vite-ssr-solidstart.md‎

Lines changed: 304 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,304 @@
1+
---
2+
category: server side rendering
3+
icon: i-logos-solidjs-icon
4+
---
5+
6+
# SSR with SolidStart
7+
8+
> Server-side rendering with SolidStart in Nitro using Vite.
9+
10+
<!-- automd:ui-code-tree src="../../examples/vite-ssr-solidstart" default="src/entry-server.tsx" ignore="README.md,GUIDE.md" expandAll -->
11+
12+
::code-tree{defaultValue="src/entry-server.tsx" expandAll}
13+
14+
```json [package.json]
15+
{
16+
"private": true,
17+
"type": "module",
18+
"scripts": {
19+
"dev": "vite dev",
20+
"build": "vite build"
21+
},
22+
"dependencies": {
23+
"@solidjs/meta": "^0.29.4",
24+
"@solidjs/router": "^0.15.4",
25+
"@solidjs/start": "^2.0.0-alpha.2",
26+
"nitro": "^3.0.260311-beta",
27+
"solid-js": "^1.9.11",
28+
"vite": "^8.0.0"
29+
},
30+
"engines": {
31+
"node": ">=22"
32+
}
33+
}
34+
```
35+
36+
```json [tsconfig.json]
37+
{
38+
"compilerOptions": {
39+
"target": "ESNext",
40+
"module": "ESNext",
41+
"moduleResolution": "bundler",
42+
"allowSyntheticDefaultImports": true,
43+
"esModuleInterop": true,
44+
"jsx": "preserve",
45+
"jsxImportSource": "solid-js",
46+
"allowJs": true,
47+
"strict": true,
48+
"noEmit": true,
49+
"isolatedModules": true,
50+
"types": ["@solidjs/start/env"],
51+
"paths": {
52+
"~/*": ["./src/*"]
53+
}
54+
}
55+
}
56+
```
57+
58+
```ts [vite.config.ts]
59+
import { defineConfig } from "vite";
60+
import { solidStart } from "@solidjs/start/config";
61+
import { nitro } from "nitro/vite";
62+
63+
export default defineConfig({
64+
plugins: [solidStart(), nitro()],
65+
});
66+
```
67+
68+
```css [src/app.css]
69+
body {
70+
font-family:
71+
Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
72+
}
73+
74+
a {
75+
margin-right: 1rem;
76+
}
77+
78+
main {
79+
text-align: center;
80+
padding: 1em;
81+
margin: 0 auto;
82+
}
83+
84+
h1 {
85+
color: #335d92;
86+
text-transform: uppercase;
87+
font-size: 4rem;
88+
font-weight: 100;
89+
line-height: 1.1;
90+
margin: 4rem auto;
91+
max-width: 14rem;
92+
}
93+
94+
p {
95+
max-width: 14rem;
96+
margin: 2rem auto;
97+
line-height: 1.35;
98+
}
99+
100+
@media (min-width: 480px) {
101+
h1 {
102+
max-width: none;
103+
}
104+
105+
p {
106+
max-width: none;
107+
}
108+
}
109+
```
110+
111+
```tsx [src/app.tsx]
112+
import { MetaProvider, Title } from "@solidjs/meta";
113+
import { Router } from "@solidjs/router";
114+
import { FileRoutes } from "@solidjs/start/router";
115+
import { Suspense } from "solid-js";
116+
import "./app.css";
117+
118+
export default function App() {
119+
return (
120+
<Router
121+
root={(props) => (
122+
<MetaProvider>
123+
<Title>SolidStart - Basic</Title>
124+
<Suspense>{props.children}</Suspense>
125+
</MetaProvider>
126+
)}
127+
>
128+
<FileRoutes />
129+
</Router>
130+
);
131+
}
132+
```
133+
134+
```tsx [src/entry-client.tsx]
135+
// @refresh reload
136+
import { mount, StartClient } from "@solidjs/start/client";
137+
138+
mount(() => <StartClient />, document.getElementById("app")!);
139+
```
140+
141+
```tsx [src/entry-server.tsx]
142+
// @refresh reload
143+
import { createHandler, StartServer } from "@solidjs/start/server";
144+
145+
export default createHandler(() => (
146+
<StartServer
147+
document={({ assets, children, scripts }) => (
148+
<html lang="en">
149+
<head>
150+
<meta charset="utf-8" />
151+
<meta name="viewport" content="width=device-width, initial-scale=1" />
152+
{assets}
153+
</head>
154+
<body>
155+
<div id="app">{children}</div>
156+
{scripts}
157+
</body>
158+
</html>
159+
)}
160+
/>
161+
));
162+
```
163+
164+
```tsx [src/routes/[...404].tsx]
165+
import { Title } from "@solidjs/meta";
166+
import { HttpStatusCode } from "@solidjs/start";
167+
168+
export default function NotFound() {
169+
return (
170+
<main>
171+
<Title>Not Found</Title>
172+
<HttpStatusCode code={404} />
173+
<h1>Page Not Found</h1>
174+
<p>
175+
Visit{" "}
176+
<a href="https://start.solidjs.com" target="_blank">
177+
start.solidjs.com
178+
</a>{" "}
179+
to learn how to build SolidStart apps.
180+
</p>
181+
</main>
182+
);
183+
}
184+
```
185+
186+
```tsx [src/routes/index.tsx]
187+
import { Title } from "@solidjs/meta";
188+
189+
export default function Home() {
190+
return (
191+
<main>
192+
<Title>Hello World</Title>
193+
<h1>Hello world!</h1>
194+
<p>
195+
Visit{" "}
196+
<a href="https://start.solidjs.com" target="_blank">
197+
start.solidjs.com
198+
</a>{" "}
199+
to learn how to build SolidStart apps.
200+
</p>
201+
</main>
202+
);
203+
}
204+
```
205+
206+
::
207+
208+
<!-- /automd -->
209+
210+
<!-- automd:file src="../../examples/vite-ssr-solidstart/README.md" -->
211+
212+
Set up server-side rendering (SSR) with Solid, Vite, and Nitro. This setup enables streaming HTML responses, automatic asset management, and client hydration.
213+
214+
## Overview
215+
216+
1. Add the Nitro Vite plugin to your Vite config
217+
2. Create a server entry that renders your app to HTML
218+
3. Create a client entry that hydrates the server-rendered HTML
219+
220+
## 1. Configure Vite
221+
222+
Add the SolidStart and Nitro plugins to your Vite config.
223+
224+
```js [vite.config.ts]
225+
import { defineConfig } from "vite";
226+
import { solidStart } from "@solidjs/start/config";
227+
import { nitro } from "nitro/vite";
228+
229+
export default defineConfig({
230+
plugins: [solidStart(), nitro()],
231+
});
232+
```
233+
234+
## 2. Create the App Component
235+
236+
Create a shared Solid component that runs on both server and client:
237+
238+
```tsx [src/app.tsx]
239+
import { MetaProvider, Title } from "@solidjs/meta";
240+
import { Router } from "@solidjs/router";
241+
import { FileRoutes } from "@solidjs/start/router";
242+
import { Suspense } from "solid-js";
243+
244+
export default function App() {
245+
return (
246+
<Router
247+
root={(props) => (
248+
<MetaProvider>
249+
<Title>SolidStart - Basic</Title>
250+
<Suspense>{props.children}</Suspense>
251+
</MetaProvider>
252+
)}
253+
>
254+
<FileRoutes />
255+
</Router>
256+
);
257+
}
258+
```
259+
260+
## 3. Create the Server Entry
261+
262+
The server entry renders your Solid app to a streaming HTML response:
263+
264+
```tsx [src/entry-server.tsx]
265+
// @refresh reload
266+
import { createHandler, StartServer } from "@solidjs/start/server";
267+
268+
export default createHandler(() => (
269+
<StartServer
270+
document={({ assets, children, scripts }) => (
271+
<html lang="en">
272+
<head>
273+
<meta charset="utf-8" />
274+
<meta name="viewport" content="width=device-width, initial-scale=1" />
275+
{assets}
276+
</head>
277+
<body>
278+
<div id="app">{children}</div>
279+
{scripts}
280+
</body>
281+
</html>
282+
)}
283+
/>
284+
));
285+
```
286+
287+
## 4. Create the Client Entry
288+
289+
The client entry hydrates the server-rendered HTML, attaching Solid's event handlers:
290+
291+
```tsx [src/entry-client.tsx]
292+
// @refresh reload
293+
import { mount, StartClient } from "@solidjs/start/client";
294+
295+
mount(() => <StartClient />, document.getElementById("app")!);
296+
```
297+
298+
<!-- /automd -->
299+
300+
## Learn More
301+
302+
- [SolidJS Documentation](https://docs.solidjs.com/)
303+
- [Renderer](/docs/renderer)
304+
- [Server Entry](/docs/server-entry)

‎examples/vite-ssr-solidstart/README.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
Set up server-side rendering (SSR) with Solid, Vite, and Nitro. This setup enables streaming HTML responses, automatic asset management, and client hydration.
2+
3+
## Overview
4+
5+
1. Add the Nitro Vite plugin to your Vite config
6+
2. Create a server entry that renders your app to HTML
7+
3. Create a client entry that hydrates the server-rendered HTML
8+
9+
## 1. Configure Vite
10+
11+
Add the SolidStart and Nitro plugins to your Vite config.
12+
13+
```js [vite.config.ts]
14+
import { defineConfig } from "vite";
15+
import { solidStart } from "@solidjs/start/config";
16+
import { nitro } from "nitro/vite";
17+
18+
export default defineConfig({
19+
plugins: [solidStart(), nitro()],
20+
});
21+
```
22+
23+
## 2. Create the App Component
24+
25+
Create a shared Solid component that runs on both server and client:
26+
27+
```tsx [src/app.tsx]
28+
import { MetaProvider, Title } from "@solidjs/meta";
29+
import { Router } from "@solidjs/router";
30+
import { FileRoutes } from "@solidjs/start/router";
31+
import { Suspense } from "solid-js";
32+
33+
export default function App() {
34+
return (
35+
<Router
36+
root={(props) => (
37+
<MetaProvider>
38+
<Title>SolidStart - Basic</Title>
39+
<Suspense>{props.children}</Suspense>
40+
</MetaProvider>
41+
)}
42+
>
43+
<FileRoutes />
44+
</Router>
45+
);
46+
}
47+
```
48+
49+
## 3. Create the Server Entry
50+
51+
The server entry renders your Solid app to a streaming HTML response:
52+
53+
```tsx [src/entry-server.tsx]
54+
// @refresh reload
55+
import { createHandler, StartServer } from "@solidjs/start/server";
56+
57+
export default createHandler(() => (
58+
<StartServer
59+
document={({ assets, children, scripts }) => (
60+
<html lang="en">
61+
<head>
62+
<meta charset="utf-8" />
63+
<meta name="viewport" content="width=device-width, initial-scale=1" />
64+
{assets}
65+
</head>
66+
<body>
67+
<div id="app">{children}</div>
68+
{scripts}
69+
</body>
70+
</html>
71+
)}
72+
/>
73+
));
74+
```
75+
76+
## 4. Create the Client Entry
77+
78+
The client entry hydrates the server-rendered HTML, attaching Solid's event handlers:
79+
80+
```tsx [src/entry-client.tsx]
81+
// @refresh reload
82+
import { mount, StartClient } from "@solidjs/start/client";
83+
84+
mount(() => <StartClient />, document.getElementById("app")!);
85+
```

0 commit comments

Comments
 (0)