YouBothAgent▾
You — Business rules and flows you own. Read these yourself.
Both — Know the idea; your agent follows the details.
Agent — Conventions and references your agent follows. Look up as needed.
Introduction▾
Tutorials▾
System Architecture▾
Module Convention▾
Scalar Convention▾
Model.View.tsx
Model.View.tsx files are specialized server components dedicated to the comprehensive presentation of proper models (Full Models). Unlike Units which display summaries (Light Models), Views are responsible for rendering the full detail of a domain entity, often serving as the main content for detail pages.
💎Full Detail
Views have access to all properties of a model, including heavy fields like content bodies, detailed arrays, or sensitive data not present in Light Models.
View vs Unit: Understanding the Difference
It is crucial to distinguish between View and Unit components to maintain a clean architecture and optimal performance.
ComparisonDescription
Model.View
Renders the Full Model (cnst.Model). Used for main pages.
Model.Unit
Renders the Light Model (cnst.LightModel). Used for lists/cards.
File Location
File Structure
Implementation
Views typically export a 'General' component and other specialized layouts. They receive the full Model types defined in your constants.
1. Interface Definition
Define props using the Full Model type (e.g., cnst.Product, not cnst.LightProduct).
2. General Component
Usage in Detail Pages
Views are designed to be served in dynamic routes (e.g., [id]/page.tsx) where the full model is fetched.
Using Load.Page
For optimal performance and clean handling of async data, use the
Load.Page utility.app/[lang]/shop/product/[productId]/page.tsx
Load.View
When using Views within Client Components (like Zones or Tab layouts), simply passing props can lead to hydration mismatches. The
Load.View utility solves this by safely hydrating the model state into the store.Pattern: Zone.View Wrapper
Define a specialized Zone component that takes a
ClientView object and renders your View using Load.View.lib/product/Product.Zone.tsx
Composition Strategy
Ideally, a View should not contain complex logic or huge amounts of code. Its main job is to assemble smaller pieces—Units (data), Utilities (actions), and Zones (layouts)—into a complete page.
View (Parent)
Layouts, Structural grids, Headings
⬇️
Children
- Unit: Sub-items, lists within the view
- Util: Interactive buttons (Like, Share)
- Zone: Complex subsections (Comments)