Skip to main content

Cross-Service Prefetch

Cross-service prefetch allows one Next.js service to prefetch JS/CSS chunks of another service before the user navigates, improving perceived page load speed.

usePrefetchJs​

A React hook exported from @traveloka/core. It returns a callback that prefetches all JS/CSS chunks needed by a specific page in a target service.

  • Cross-service prefetch: Loads the target service's prefetch manifest from CDN, then injects <link rel="prefetch"> tags for each JS/CSS chunk required by the specified route.
  • Same-service prefetch: If the target service matches the current app, delegates to Next.js built-in router.prefetch().
  • Manifest loading and individual chunk prefetch links are cached to avoid duplicate work.

How to Use​

Step 1: Register the target service and path​

Add an entry to ci-utils/action-config/prefetch-register.json:

{
  "webpla-desktop": ["/booking/[token]"]
}
  • key: service name (must match the service's inputs.service_name in CI)
  • value: array of Next.js page paths to include (must match keys in the service's build-manifest.json, including dynamic segments like [token] — the segment name must exactly match the file system naming)

Only registered services will have a prefetch manifest generated during CI build, and only registered paths within that service are included.

Step 2: Use the usePrefetchJs hook​

The triggering point is decided by product team engineers. You can add it in high intended following path.

import { usePrefetchJs } from '@traveloka/core';

function MyComponent() {
  const prefetchJs = usePrefetchJs();

  useEffect(() => {
    prefetchJs('/booking/[token]', 'webpla-desktop');
  }, []);

  return <div>...</div>;
}

Parameters of the returned callback:

ParameterTypeDescription
nextPathstringThe Next.js page path to prefetch (e.g. /booking/[token]). Must match the route key in the target service's build-manifest.json.
servicestringThe target service name (e.g. webpla-desktop, webacd-desktop).

Step 3: Deploy​

The target service must be built and deployed after being added to the register, so that its prefetch manifest is available on CDN. The calling service does not need any CI changes.