page-transition-and-rendering-flow

Document GROWI's server-to-client data flow and prescribe hydration-safe route transitions.

1.5k|242|Updated Feb 16, 2017

Search Tags:#routing #state-management #ssr #hydration #web-app #rendering-flow #atom-hydration

Ready to run

npx skills add https://github.com/growilabs/growi --skill page-transition-and-rendering-flow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: page-transition-and-rendering-flow
Source: https://github.com/growilabs/growi/tree/main/apps/app/.claude/skills/learned/page-transition-and-rendering-flow
Command: npx skills add https://github.com/growilabs/growi --skill page-transition-and-rendering-flow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a clear blueprint for the end-to-end data flow from server-side rendering to client navigation in GROWI, including how global state atoms are hydrated and kept in sync across navigations, to prevent hydration mismatches and render-time state updates.

Core Features & Use Cases

Document the roles of the dynamic route entry, SSR props, hydration hooks, and global atoms, and describe safe hydration patterns that avoid writing to atoms during render.
Provide use cases for when editing page transition logic or global atom synchronization, with a focus on maintaining invariant rendering across navigations.

Quick Start

Review and adopt the hydration-safe pattern for global atoms during route transitions.

Frequently Asked Questions about page-transition-and-rendering-flow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I prevent hydration mismatches during server-side rendering to client navigation?▼

Prevent hydration mismatches by adopting a safe hydration pattern that avoids writing to global state atoms during the render cycle. This ensures server-provided path data aligns with client route transitions without triggering render-time state updates.

What is the SSR-to-client rendering flow in a web application?▼

The SSR-to-client rendering flow maps the end-to-end data transfer from server-side rendering to client navigation. It details how dynamic route entries pass SSR props to hydration hooks, which then synchronize global atoms to maintain invariant rendering.

How do I synchronize global atoms during route transitions?▼

Synchronize global atoms during route transitions by using prescribed hydration hooks to perform atomic updates. This method safely bridges SSR props and client state management, ensuring data consistency without causing render-time state updates.

Why does my web app experience render-time state updates after hydration?▼

Render-time state updates after hydration occur when global atoms are written to during the render phase. Following a hydration-safe pattern that defers state synchronization to hooks prevents these render-time update errors.

Does shallow routing work with server-provided path data in SSR?▼

Yes, shallow routing works with server-provided path data when implementing route transitions. The skill defines concrete requirements for using shallow routing alongside atomic updates to maintain invariant rendering across navigations.