FeaturesChapter 1 / 5 · Rendering
ssr → spa
pages/ → routes
state outside the tree
server.tsx
0000000000
1
2
3
// same process as your pages, return a value → JSON
app.api("GET", "/api/posts", () => db.posts.all());
app.api("POST", "/api/posts", async (req) => db.posts.create(await req.json()));
server.tsx
0000000000
1
2
3
4
5
6
7
// pre-paint: set .dark before the first frame
const noFouc = `<script>try{if(localStorage
.getItem('site-theme')!=='light')document
.documentElement.classList.add('dark')}catch(e){}</script>`;
// live toggle, the preference persists across reloads
const [theme, setTheme] = useAtom(themeAtom);