Bind routes to templates by centralizing data-fetching logic for SSR, SSG, or ISR.
npx skills add https://github.com/grvpanchal/elegant-opencode --skill server-page
Please help me install this Agent Skill. Skill: server-page Source: https://github.com/grvpanchal/elegant-opencode/tree/main/skills/server-page Command: npx skills add https://github.com/grvpanchal/elegant-opencode --skill server-page
Pages often carry data-fetching logic inside routes, causing bloated components and fragile templates. This Skill helps you cleanly separate data fetching from presentation by guiding when to use SSR, SSG, or ISR and how to wire getServerSideProps/getStaticProps to your templates.
Create a new route file, decide between SSR, SSG, or ISR, and wire getServerSideProps or getStaticProps to pass props to your template.
High-intent search queries and answers about installing and using this skill.
Separate data-fetching from templates by centralizing logic in route handlers. Use getServerSideProps or getStaticProps to fetch data and pass props to dumb templates, keeping pages thin and preventing fragile, bloated UI components.
Choose SSR for dynamic data per request, SSG for static content at build time, and ISR for static content with periodic updates. Selecting the correct rendering strategy ensures optimal caching, proper 404 handling, and clean prop passing.
Wire getServerSideProps and getStaticProps by fetching required data inside these route handlers and passing it as props to your templates. This enforces minimal leakage into UI components and keeps your presentation layer clean.
Pages become bloated when data-fetching logic resides inside routes. Keep pages thin by moving data-fetching to dedicated route logic using getServerSideProps or getStaticProps, ensuring templates remain dumb and only handle presentation.
Centralizing data-fetching logic handles 404 errors and caching considerations within route handlers. By evaluating rendering strategies like SSR, SSG, or ISR, it ensures proper error handling and cache management before passing props.
baxriddin0317Implement scalable Next.js 16 App Router routing patterns for e-commerce projects.
LimaTechnologiesImplement Next.js 15 App Router patterns for components, data fetching, and routing.
shiroginRefactor React components using composition, compound components, and context providers.
theslashdojoAutomate Next.js Pages Router setup and data fetching with getStaticProps and getServerSideProps.
