The correct approach is to use the authenticated XM Cloud CLI session. The `jss start:connected` command (or similar npm scripts) leverages the CLI’s authentication context to securely fetch the required access token for GraphQL calls, avoiding the need to store long-lived tokens in code or disable security. This is the standard, secure workflow for local development with XM Cloud and JSS.

In XM Cloud, the synchronization of JSS components into the Sitecore content authoring interface is managed via the Pages application. The ‘Available Renderings’ section for an item (or its template’s standard values) controls which components authors can add. If a component is missing, it’s most efficient to first verify it has been successfully registered and allowed here, as this is the direct gatekeeper for the Experience Editor toolbox.

For performance, filtering, sorting, and pagination should be pushed to the data layer (Sitecore’s Edge GraphQL) whenever possible. Using the `search` field with specific `where` and `orderBy` arguments allows the XM Cloud Edge to return only the needed data in the correct order, minimizing data transfer and client-side processing. This is a core best practice for efficient data retrieval in headless Sitecore.

XM Cloud’s build servers perform a clean install based on the repository’s lock file (`package-lock.json` or `yarn.lock`). If this file is not committed, the build server will run `npm install` which may resolve to different, potentially breaking, versions of packages than those used in development. Ensuring the lock file is committed guarantees consistent dependency resolution across all environments.

In XM Cloud, personalization rules are managed within the Sitecore Pages authoring interface. Authors can create conditions (like query string rules) and combine them into rules, which are then assigned to rendering variants. This is a no-code, content-author-friendly approach that leverages Sitecore’s native personalization engine, with the evaluation happening on the Edge before the layout is returned to the rendering host.

To allow content authors to edit navigation without a deployment, the navigation data must be fetched dynamically from the CMS at runtime. Fetching it as part of the layout data (via the GraphQL layout query) ensures the live, author-edited content is used. XM Cloud Edge caches this layout data efficiently, providing good performance while maintaining the necessary dynamism for content changes.

In a JSS-based XM Cloud architecture, multi-site setup is primarily managed in code. The site is defined in the `sitecore/config.yaml` (or similar configuration), specifying its name, hostname, and other settings. Code organization (like site-specific folders or modules) handles the design system. The site definition is synchronized with Sitecore during the deployment/item synchronization process, creating the necessary infrastructure in the CMS.

The recommended pattern is to manage configuration that varies per environment or is author-controlled within Sitecore as content. Storing the script URL (or a base URL) in a dictionary item allows it to be changed without a code deployment. The page layout component can fetch this value via GraphQL and inject it into the `next/script` component. This aligns with the CMS-driven philosophy and simplifies environment management.

For data that changes relatively infrequently (like product details), Incremental Static Regeneration (ISR) is the optimal Next.js pattern. It allows the page to be statically generated at build time and then regenerated in the background at a specified interval (`revalidate`). This provides fast SSR performance, excellent SEO, and near-real-time data updates without blocking requests on slow external API calls. Caching within `getServerSideProps` is less efficient than ISR’s built-in static generation and CDN distribution.

The correct approach is to use the authenticated XM Cloud CLI session. The `jss start:connected` command (or similar npm scripts) leverages the CLI’s authentication context to securely fetch the required access token for GraphQL calls, avoiding the need to store long-lived tokens in code or disable security. This is the standard, secure workflow for local development with XM Cloud and JSS.0