Preload server data and hydrate client state in miolo applications.
npx skills add https://github.com/afialapis/miolo --skill miolo-ssr
Please help me install this Agent Skill. Skill: miolo-ssr Source: https://github.com/afialapis/miolo/tree/main/skills/miolo-ssr Command: npx skills add https://github.com/afialapis/miolo --skill miolo-ssr
Server-side rendering patterns to preload data and hydrate client state in miolo apps, enabling faster initial renders and consistent data.
Create a loader that exports an async function named loader(ctx) and returns a data object for hydration on the client.
High-intent search queries and answers about installing and using this skill.
To preload server data for hydration in miolo apps, create an exported async function named loader(ctx) that returns a data object. The client then uses the useSsrData hook to consume those keys and rehydrate state seamlessly after the initial server render.
Server-side rendering with data loaders fetches route-specific data on the server before sending HTML. The loader(ctx) function executes server-side, returning a data object that the client useSsrData hook consumes to hydrate the application state for faster initial renders.
Yes, you can implement authentication-aware data loading for multiple server-rendered routes. The loader(ctx) function supports URL-based loading and authentication context, allowing you to tailor preloaded payloads per route using useSessionContext before client hydration occurs.
The best way to configure SSR loaders to fetch data before sending HTML is defining an async loader(ctx) function that returns a data object. This server-side pattern ensures consistent data availability for the useSsrData hook during client hydration.
Client-side hydration loses preloaded server state if the loader(ctx) function does not properly return the data object or the useSsrData hook is not configured to consume those specific keys. Ensure the SSR loader configuration matches the client hydration expectations.
You need useMioloContext alongside the useSsrData hook to properly hydrate server-rendered data on the client. The useSsrData hook consumes the keys returned by the server loader, while useMioloContext provides the necessary application context for seamless state rehydration.
PabloGarciaFuentesBuild Astro islands with client directives, Zod schemas, and SSR adapters.
PatternsDevServer-render React components to reduce client-side JavaScript in Next.js App Router.
Aditya07024Implement Clerk authentication guards and server functions in TanStack React Start applications.
simoabidGuide Next.js App Router development with component, data fetching, and routing best practices.
