From harness-claude
Pre-renders React components on the server for better SEO and faster initial load. Covers Next.js getServerSideProps, Remix loaders, and custom Express setups with React 18 streaming.
How this skill is triggered — by the user, by Claude, or both
Slash command
/harness-claude:react-server-renderingThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Pre-render React components on the server for improved SEO and initial load performance
Pre-render React components on the server for improved SEO and initial load performance
getServerSideProps), Remix (loader), or custom Express + renderToStringgetServerSideProps to fetch data server-side:
export async function getServerSideProps(context: GetServerSidePropsContext) {
const data = await fetchData(context.params.id);
return { props: { data } };
}
loader function:
export async function loader({ params }: LoaderFunctionArgs) {
return json(await fetchData(params.id));
}
cache headers appropriately — per-request SSR bypasses CDN caching.SSR sends fully-rendered HTML from the server. The browser displays content immediately while React hydrates in the background, making the UI interactive.
SSR vs SSG:
Hydration mismatch: If server-rendered HTML differs from what client React would render, React throws a hydration error. Common causes: Date.now(), Math.random(), browser-only APIs in render paths. Suppress with suppressHydrationWarning for known-safe mismatches.
React 18 streaming: renderToPipeableStream streams HTML to the browser progressively, enabling Suspense boundaries to stream in chunks. Improves TTFB for slow data.
https://patterns.dev/react/server-side-rendering
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeAnalyzes SSR/CSR trade-offs, implements streaming SSR with React 18 Suspense, and optimizes TTFB/TTI with hydration strategies and caching.
Builds React components and Next.js pages with server-side rendering, state management, and performance optimization. Activates automatically when React, JSX, or frontend build issues arise.
Guides using Next.js Server Components for data fetching, direct DB access, Server vs Client decisions, and Server Actions in data-intensive apps.