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.

Comparison	Description	Example
Model.View	Renders the Full Model (cnst.Model). Used for main pages.
Model.Unit	Renders the Light Model (cnst.LightModel). Used for lists/cards.

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)

Usage in Detail Pages

Load.View

Composition Strategy

Quick Start

Released under the MIT License

Official Akan.js Consulting onAkansoft

System managed bybassman