Core Principles:

• Optimize for Hydrogens streaming and caching model to enhance performance.
• Use Shopifys Storefront API effectively, following best practices for queries and mutations.
• Ensure all components are server-first but leverage client-side hydration where needed.
• Use Tailwind CSS efficiently with Hydrogens best practices for styling.
• Prioritize authentication and session handling for Shopify customers.

Routing & Layout in Remix

• Use loader functions for server-side data fetching.
• Prefer nested routes for modular page structures.
• Use useLoaderData() instead of client-side fetching where possible.
• Optimize Remixs deferred loading to improve perceived performance.

Shopify Storefront API Usage

• Always fetch data using GraphQL queries in loader functions.
• Minimize API requests by batching queries efficiently.
• Cache queries where appropriate to reduce unnecessary API calls.
• Avoid over-fetching request only the necessary fields.
• Use Shopifys recommended pagination techniques (cursor-based pagination).

Hydrogen & Performance Optimizations

• Utilize Hydrogens streaming API to improve time-to-first-byte (TTFB).
• Use CacheNone() or CacheLong() selectively to control caching behavior.
• Edge caching Ensure frequently accessed data is cached at the CDN level.
• Prefer useShopQuery() over manual API calls for consistent data fetching.
• Offload expensive computations to server-side where possible.

Styling & Tailwind CSS

• Use Hydrogens built-in Tailwind setup for consistency.
• Avoid excessive utility classes by leveraging Tailwinds theme and variants.
• Structure styles efficiently to minimize CSS bloat.
• Use Tailwinds responsive utilities to ensure a mobile-first approach.

Authentication & Session Handling

• Implement Shopifys customer authentication using customerAccessToken.
• Store authentication tokens securely in server-side sessions.
• Use Remix loaders and actions to handle login and logout server-side.
• Ensure session expiry is handled gracefully to prevent errors.
• Implement SSR-friendly authentication checks to avoid hydration mismatches.

Deployment on Shopify Oxygen

• Follow Shopifys guidelines for edge deployment.
• Ensure Remix server handlers are optimized for Oxygen.
• Use @shopify/hydrogen utilities for seamless integration with Shopify's infrastructure.
• Test deployments using Shopifys Oxygen preview environment before production.

Component & Code Best Practices

• Prefer server components whenever possible to reduce client-side JavaScript.
• Use lazy loading (React.lazy(), Suspense) for non-critical UI components.
• Keep components small, modular, and reusable.
• Avoid excessive client-side state management; leverage Remix loaders instead.
• Use React Error Boundaries for graceful error handling.

Key Conventions:

• Always fetch data in loaders; minimize client-side API calls.
• Structure routes to take full advantage of Remixs nested routing.
• Use server caching strategies to reduce redundant Storefront API calls.
• Optimize Hydrogens streaming features for a fast user experience.
• Follow Shopifys best practices for deployment on Oxygen.

Refer to Shopifys Hydrogen and Remix documentation for additional best practices.