Information from the URL

Overview

Dynamic web applications often need to read information directly from the URL.
JopiJS provides two ways to do this:

• Path Parameters: Extracting dynamic segments (e.g., /products/123).
• Query Parameters: Reading optional values from the query string (e.g., /search?q=shoes).

1. Parametrized URLs (Dynamic Segments)

Parametrized URLs allow you to match patterns instead of hardcoded paths. This is essential for things like product pages, user profiles, or blog posts.

How it works

To create a dynamic segment, wrap a folder name in square brackets: [paramName].

Example: We want to handle URLs like /products/my-first-product, /products/another-product, etc.

Structure:

src/
└── mod_shop/
    └── @routes/
        └── products/
            └── [productId]/     <-- Dynamic folder
                └── page.tsx     <-- The page handling the request

Accessing the value

In your page component, you can access the value of [productId] via the params prop.

import { JopiPageProps } from "jopijs/uikit";

export default function ProductPage(props: JopiPageProps) {
    // 1. Get the dynamic parameter
    const productId = props.params.productId;

    // 2. Use it (e.g., fetch data, display it)
    return (
        <div>
            <h1>Product Details</h1>
            <p>You are viewing product: <strong>{productId}</strong></p>
        </div>
    );
}

Nested Dynamic Routes

You can nest dynamic segments just like normal folders. To handle /products/[productId]/reviews/[reviewId]:

products/
└── [productId]/
    └── reviews/
        └── [reviewId]/
            └── page.tsx

Accessing them is just as easy:

// props.params.productId -> "my-product"
// props.params.reviewId  -> "123"

2. Query Parameters (Search Params)

Query parameters are key-value pairs at the end of a URL, starting with ?. They are typically used for optional data like filters, sorting, or pagination.

Example URL: http://localhost:3000/catalog?color=red&sort=asc

Accessing Query Params

Use the searchParams prop to read these values.

import { JopiPageProps } from "jopijs/uikit";

export default function CatalogPage(props: JopiPageProps) {
    const { color, sort } = props.searchParams;

    return (
        <div>
            <h1>Catalog</h1>
            <p>Filter by Color: {color ?? 'All'}</p>
            <p>Sort Order: {sort ?? 'Default'}</p>
        </div>
    );
}

3. Caching & Query Parameters

Why? (Security & Performance)

If JopiJS generated a new cached page for every unique query string, an attacker could easily flood your server's cache/memory by requesting:

• /page?a=1
• /page?a=2
• ...
• /page?a=1000000

To prevent this "Cache Poisoning" or DDoS attack, JopiJS serves the same static page regardless of the query string by default.

Solution 1: Client-Side Handling (Recommended)

The recommended approach is to let the browser handle the query parameters.

1. The server delivers a generic, cached page .
2. The browser (React) reads the query parameters (which remain available in props.searchParams).
3. The component fetches the specific data needed based on those parameters.

Solution 2: Disable Caching (Server-Side)

If you absolutely need the server to render different HTML based on the query string (e.g., for SEO purposes on a paginated list), you must explicitly disable caching for that page.

Create a autoCache.disable file in the page's directory.

src/
└── mod_shop/
    └── @routes/
        └── catalog/
            ├── page.tsx
            └── autoCache.disable  <-- Tells JopiJS: "Do not cache this page"

With this file present, the server will execute your page.tsx for every single request, giving you access to the real searchParams on the server side.