Page Caching

Performance is automatic in JopiJS. By default, every page you create is static-first.

In this tutorial, we will see how to "break" this rule when necessary (e.g., for real-time dashboards).

Prerequisites:

• You are working in src/mod_app.
• Ensure your server is running (npm run start:dev_server).

1. Concept: Hydration

Before diving into caching, it is helpful to understand the hydration process. This is what makes JopiJS sites feel instant.

1. Server HTML Generation: The server runs your React code to generate initial HTML. (This is the part that is cached!)
2. Instant Display: The browser receives and displays this HTML immediately, before any JavaScript is downloaded. The user sees the content instantly and Google is happy!
3. Hydration: Once the JavaScript loads, React "hydrates" the page—attaching event listeners and fetching dynamic data to make the page interactive.

2. The Default Behavior

When you create a page.tsx, JopiJS generates a static HTML file.

1. Request 1: Server generates HTML -> Saves to Cache -> Sends to User.
2. Request 2: Server serves Cache directly (Instant).

You don't have to do anything. It just works.

To keep your site fast and secure, JopiJS applies strict rules to cached pages:

1. Anonymous Generation: The cached HTML is generated as if no user is logged in. This ensures the same generic file can be served to everyone.
   • Server: Delivers the generic anonymous page.
   • Browser: JopiJS immediately reads the session cookie (which contains full user details) and "hydrates" the interface with their specific data. This offers the best of both worlds: static speed + dynamic personalization. The user does not notice the difference.
2. Search Parameters (Server-Side Ignored): ?search=shoes is ignored by the server cache. This is critical to prevent attacks where bots request infinite URL variations.
   • Server: Serves the generic cached HTML (ignoring ?search=...).
   • Browser: The browser see the parameters. It can use it and adapt his content.

3. Disabling the Cache (SSR)

Sometimes, you need a page to be regenerated on every single request. The primary scenario for this is when you require strict security without exposing an API.

To disable automatic caching, simply create a file named autoCache.disable next to your page.tsx. That's it!

Example folder structure:

src/mod_app/@routes/real-time/
├── page.tsx            <-- Your dynamic page
└── autoCache.disable   <-- The file that disables caching