Data Systems

JopiJS provides several mechanisms to manage, store, and transmit data within your application. Each system answers a specific need, whether for server caching, UI state management, or backend data loading.

Here is an overview to help you choose the right tool.

Summary Table

1. ObjectProvider (Server)

What is it? The ObjectProvider is the standard server-side mechanism for encapsulating data retrieval logic. It allows defining data access functions (database, files, third-party APIs) in a typed and consistent way.

Environment: Server only.

Typical Usages:

• Abstracting SQL queries or API calls.
• Sharing data retrieval logic between multiple routes or server components.

Learn more: Check the documentation on Adding an Object Provider.

2. PageData (Server + UI)

What is it? PageData represents the initial data injected into your React page components during Server-Side Rendering (SSR). It is the "bridge" between the server and the browser. This data is serialized into JSON and hydrated on the client side.

Environment: Generated on the Server, consumed by the UI.

Typical Usages:

• Providing necessary data for the initial page display (e.g., article title, content).
• Avoiding additional API calls at page load (Waterfalling).

Storage and Availability: Data is directly embedded in the initial response HTML (as a hidden JSON script). Thus, it is immediately available upon page hydration, without any extra network request.

Advanced Features: The system also supports automatic refresh (optional): data can be updated in the background without a full page reload.

import { usePageData } from "jopijs/ui";

// UI (Component Page)
export default function MyPage() {
    const datas = usePageData();
    // ...
}

3. ValueStore (UI)

What is it? The ValueStore is a lightweight state management system for the browser. It follows the "Observable" pattern, allowing components to subscribe to specific value changes.

Environment: UI (Browser).

Typical Usages:

• Global interface state (open/closed menus, dark/light theme).
• Sharing data between distant components in the React tree.
• "Lazy Loading" values via ValueProvider.

Quick Example:

import { useStoreValue } from "jopijs/ui";

export default function MyComponent() {
    // Reactive read and write (like useState)
    const [theme, setTheme] = useStoreValue<string>("theme");

    return (
        <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
            Current Theme: {theme}
        </button>
    );
}

4. HtmlCache (Server)

What is it? The HtmlCache (or PageCache) is an HTTP-level cache built into the JopiJS server. It stores the full response (headers + body) generated for a given URL. If a request matches a valid entry in the cache, the server directly returns the stored response without executing the page code.

Environment: Server.

Typical Usages:

• Drastically improving performance (TTFB) for public pages.
• Reducing server load for static or low-dynamic content (Blog, Landing Page).

Learn more: See how to Enable Cache.

5. ObjectCache (Server)

What is it? The ObjectCache is a generic key-value cache capable of storing any serializable object (JSON). Unlike HtmlCache which stores a final HTTP response, ObjectCache is used to store data fragments or intermediate calculation results. It supports multiple backends (Memory, File).

Environment: Server.

Difference with PageData: PageData generates data intended for display (stored in HTML for ultra-fast initial display). Conversely, ObjectCache is a general storage (not page-specific). It is often used to store raw data that will then be used to construct PageData.

Typical Usages:

• Caching the result of a complex SQL query that changes rarely.
• Temporarily storing results from third-party APIs subject to quotas (Rate Limiting).
• Sharing computed data between different user requests.