ce-ssr-patterns

Configure SSR patterns for Commerce Engine storefronts across Next.js, TanStack Start, Astro, and SvelteKit.

Updated Feb 7, 2026
One-click install
npx skills add https://github.com/tark-ai/ce-starter-projects --skill ce-ssr-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ce-ssr-patterns
Source: https://github.com/tark-ai/ce-starter-projects/tree/main/.agents/skills/ce-ssr-patterns
Command: npx skills add https://github.com/tark-ai/ce-starter-projects --skill ce-ssr-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Efficiently implement and standardize server-side rendering patterns for Commerce Engine storefronts across multiple frameworks (Next.js, TanStack Start, Astro, and SvelteKit) using first-party wrappers and a common token-management model.

Core Features & Use Cases

  • Framework wrappers: guidance for using @commercengine/storefront wrappers in Next.js, TanStack Start, Astro, and SvelteKit.
  • Accessor patterns: publicStorefront(), clientStorefront(), and serverStorefront() usage across frameworks.
  • Bootstrap & pre-rendering: strategies to bootstrap the storefront on first load and pre-render catalog pages for SEO.
  • References: framework-specific references with code examples and guardrails.

Quick Start

Follow the references to implement SSR scaffolds for Next.js, TanStack Start, Astro, and SvelteKit using the first-party storefront wrappers.

Frequently Asked Questions about ce-ssr-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement server-side rendering for a Commerce Engine storefront?▼

To implement server-side rendering for a Commerce Engine storefront, use first-party framework wrappers and accessor patterns to configure bootstrap, token management, and pre-rendering across client and server boundaries for SEO-friendly results.

Can I use SSR patterns with Next.js, Astro, and SvelteKit for my storefront?▼

Yes, you can use SSR patterns with Next.js, Astro, and SvelteKit. The implementation provides validated framework wrappers and cross-framework reference guides to ensure consistent, secure, and production-ready storefront rendering.

What is the best way to manage tokens across server and client boundaries in SSR?▼

The best way to manage tokens across server and client boundaries in SSR is by applying the common token-management model using publicStorefront(), clientStorefront(), and serverStorefront() accessor patterns during storefront bootstrap.

How do I pre-render catalog pages for SEO in a Commerce Engine storefront?▼

To pre-render catalog pages for SEO in a Commerce Engine storefront, apply the provided bootstrap and pre-rendering strategies using framework-specific wrappers to generate static HTML on first load.

Does this SSR pattern validation support TanStack Start?▼

Yes, this SSR pattern validation supports TanStack Start. It provides specific framework wrappers and reference guides with code examples and guardrails for TanStack Start alongside Next.js, Astro, and SvelteKit.