sfnext-components

Components Skill

This skill covers component development patterns in Storefront Next — createPage HOC, Suspense boundaries, shadcn/ui integration, and Tailwind CSS styling.

Page Component Pattern

Most routes export a default function component that receives loaderData as props:

import { Suspense } from 'react';
import { Await } from 'react-router';
import { SeoMeta } from '@/components/seo-meta';

type ProductPageData = {
    product: Promise<Product>;
    reviews: Promise<Reviews>;
};

export default function ProductPage({ loaderData }: { loaderData: ProductPageData }) {
    return (
        <>
            <SeoMeta title="Product" />
            <Suspense fallback={<ProductHeaderSkeleton />}>
                <Await resolve={loaderData.product}>
                    {(product) => <ProductHeader product={product} />}
                </Await>
            </Suspense>
            <Suspense fallback={<ReviewsSkeleton />}>
                <Await resolve={loaderData.reviews}>
                    {(reviews) => <ProductReviews reviews={reviews} />}
                </Await>
            </Suspense>
        </>
    );
}

createPage HOC (Optional)

For pages needing standardized Suspense wrappers and page key management:

import { createPage } from '@/components/create-page';

export default createPage({
    component: ProductView,
    fallback: <ProductSkeleton />,
});

Suspense Boundaries and Code Splitting

Use <Suspense> + <Await> for streaming loader data, and lazy() for code-splitting heavy components:

import { lazy, Suspense } from 'react';

// Code-split a heavy component
const CustomerReviewsSection = lazy(() =>
    import('@/components/customer-reviews-section/customer-reviews-section')
);

export default function ProductPage({ loaderData }: { loaderData: ProductPageData }) {
    return (
        <>
            {/* Stream loader data */}
            <Suspense fallback={<ProductHeaderSkeleton />}>
                <Await resolve={loaderData.product}>
                    {(product) => <ProductHeader product={product} />}
                </Await>
            </Suspense>

            {/* Code-split component */}
            <Suspense fallback={<ReviewsSkeleton />}>
                <CustomerReviewsSection productId={loaderData.productId} />
            </Suspense>
        </>
    );
}