Optimizing eCommerce Success: Best Practices for Web Development with Modern Frameworks

We could spend ages on this topic, but most developers will give you the same advice: use the framework you’re comfortable with, and that best fits your needs. For us, that means Next.js, Remix Run, Astro.build, and Svelte.

What about Angular, Qwik, Vue, Nuxt, PHP, TanStack, and the rest? It’s not that they aren’t worth using—we just haven’t had the time to get truly good at them. As we said, sticking with what you already know is usually the smartest move.

While familiarity with a framework is important, it’s equally essential to consider broader criteria such as performance benchmarks, scalability, community support, and alignment with your project’s specific goals. The right choice can significantly impact your site’s performance, user experience, and long-term maintainability.

In the e-commerce world, as you know, milliseconds matter. The less javascript you ship to the Browser, the better performance you will get. That’s why you see all the new frameworks embracing that logic, Next JS with App Router. Remix, Fresh (with Deno), etc.

They’ve all decided to go server-side rendering first with progressive enhancement. But if they do the same, how do they compare in terms of best practices? We'll try to find out.

In eCommerce, performance is more than just a requirement. Core Web Vitals, as defined by Google, are essential metrics that measure a page's user experience performance. Respecting these metrics and optimizing for them is not optional but a must, especially for eCommerce websites, where every second of loading time can impact conversion rates.

• Largest Contentful Paint (LCP): Optimize for fast loading, especially images and large text blocks. Use tools like Next.js's Image component or Astro's pre-rendering to serve optimized images. These approaches ensure the correct image size and format (e.g., WebP or AVIF) based on user device capabilities.
• First Input Delay (FID): Ensure interactions are responsive and that the page reacts instantly. Remix emphasizes server-side rendering (SSR), reducing client-side JavaScript execution. Svelte's compiled JavaScript is lean, further minimizing interaction delays.
• Cumulative Layout Shift (CLS): Keep your layout stable, especially for product images and buttons, so users don’t click on the wrong thing due to shifting content. Use Astro or SvelteKit to control layout rendering finely.

With Next.js, you can leverage built-in React Server Components to render content on the server, reducing the JavaScript payload and improving interactivity. Harness SSR for faster data fetching and pre-rendering critical product data on the server when using Remix. Use loaders and defer functionality to prioritize above-the-fold content, ensuring interactive elements are ready quickly.

Leverage Astro’s static-first approach to serve pre-rendered pages, ensuring the fastest possible LCP scores. Implement partial hydration to load JavaScript only for interactive components, preserving visual stability.

Finally, Svelte's lean architecture will minimize JavaScript payloads, optimize LCP and FID, and use scoped styles to avoid CLS caused by conflicting or late-loading CSS.

Beyond frameworks, content delivery networks (CDNs) like Cloudflare or Vercel serve assets closer to the user. Implement lazy loading for non-critical images and scripts. Regularly audit performance using tools like Lighthouse or WebPageTest to monitor and refine Core Web Vitals.

Investing in speed optimization isn’t just about making your site load faster—it’s about maintaining a seamless shopping experience that converts users into customers.

Image source Crystallize CWV comic (click the link to discover the cure).

Server-side rendering (SSR) allows for the initial HTML to be rendered on the server, significantly improving the first-load time by serving fully rendered HTML to the browser. This is particularly useful in eCommerce, where content needs to be indexed quickly, and products must instantly appear in search engine results.

Progressive Hydration, on the other hand, delays loading JavaScript for non-critical interactive elements (like product cards, cart buttons, or search filters) when needed, reducing the initial JavaScript payload. This means you send the critical content first, with the JavaScript for interactive components loading in the background.

• Next.js 15: With built-in SSR capabilities and React Server Components, Next.js makes it easy to render dynamic content like product details on the server. Its automatic static optimization is perfect for pages that don’t require frequent updates.
• Remix: Emphasizes SSR by default and promotes fine-grained control over data fetching. By utilizing loaders, you can ensure product data is fetched and pre-rendered on the server, improving page load times.
• Astro: Astro's ability to serve pre-rendered content with partial hydration is a major performance boost for eCommerce sites. Static content loads first; only interactive elements (like shopping carts) are hydrated with JavaScript.
• Svelte: Svelte has a unique edge as it compiles highly optimized vanilla JavaScript. This makes it extremely fast for SSR, delivering quick content to users without the overhead of a virtual DOM.

Additionally, edge computing platforms like Vercel or Cloudflare Workers can be used to deliver SSR content faster globally.

The Optimistic UI approach works by assuming that actions like adding a product to the cart will succeed and immediately reflect those changes in the UI rather than waiting for the backend confirmation. For example, if you’re 90% sure that adding an item to the cart will work (based on prior checks or internal logic), why wait for the 10% chance that something might fail? By optimistically updating the UI, you improve the user's perception of speed and responsiveness.

You can catch the operation and send the user a friendly error message when the operation fails. This results in a snappier and more fluid experience, even if something minor goes wrong in the background. In eCommerce, where the user expects real-time updates (like adding a product to a cart), this can make a huge difference in perceived performance.

For eCommerce sites, images play a significant role in pretty much anything, from actual sales over marketing gimmicks to performance. Performance vise ensuring that the right image sizes and formats are served for different devices and resolutions can drastically improve load times.

When you upload an image to Crystallize, we generate different sizes and formats, such as Webp and Avif, so you can focus on just rendering the image you need based on screen size. Furthermore, the frameworks also provide help here.

• Next.js's Image component is a standout here. It automatically optimizes images by serving them in modern formats like WebP and sizes them appropriately based on the user’s device.
• Astro and SvelteKit also offer strong image optimization strategies. Astro provides native image optimization and lazy loading support, improving performance without additional configuration, for example.
• Remix: Although it doesn’t have built-in image components like Next.js, you can integrate image optimization via third-party services (e.g., Cloudinary or Imgix) for advanced techniques.

Always use responsive images with srcset and sizes attributes to serve images tailored to the user’s screen, ensuring fast loading times on all devices.

Some CMS and eCommerce solutions offer image optimization as a part of their service. In Crystallize, for example, when you upload images, we will compress/convert images to AVIF and Webp, which are better image types, and resize them.

Your CSS framework is closely tied to your Core Web Vitals since it can significantly impact performance. Choosing the correct one depends on the project. You can, of course, go with good ol’ CSS instead of a framework.

• Svelte doesn’t require an external CSS framework. Its built-in scoped styles keep the CSS minimal and efficient.
• Tailwind CSS works great with Next.js, Remix, and Astro. It helps you build responsive and performant designs without bloating the final CSS output. Next.js provides excellent integration with Tailwind, offering automatic purging of unused styles, making your production builds lean.
• Astro takes a modular approach, allowing you to import only the necessary components and avoiding unnecessary CSS and JavaScript from non-essential libraries.

Using these tools ensures that your eCommerce site remains responsive and fast without being weighed down by unused CSS.

In eCommerce, having a well-optimized site for SEO is non-negotiable. Next.js, Remix, Astro, and Svelte all provide features to ensure that your product pages rank well:

• Next.js 15: It supports automatic static optimization and easily integrates with React Helmet or the new Head component, allowing for dynamic meta tags and SEO-friendly URLs.
• Remix: With its SSR-first approach, Remix ensures that product pages and dynamic content are readily available for search engines. It also allows for fine control over meta tags (metatags.io), structured data (schema.org), and other SEO aspects through loaders.
• Astro: Astro allows for highly optimized static pages with the ability to integrate SEO-focused libraries for meta tags, JSON-LD schema, and redirects. It’s especially great for SEO on static product pages.
• With SvelteKit, you get automatic SSR and easy metadata management for each page. It allows full control over meta tags, structured data, and routing for better SEO performance.

Alternatively, the CMS or e-commerce platform you use can handle most (if not all) of your SEO requirements. With Crystallize, for example, you can allow editors to easily make changes without changing code. Head over to our eCommerce SEO guide for more.

Routing in eCommerce must be simple, predictable, and SEO-friendly. A clean and efficient routing strategy helps not only in organizing content but also in improving URL structure for search engines. You should avoid overly complex route hierarchies that can become difficult to maintain as the project scales.

Here’s how each framework can help:

• Next.js 15 provides file-based routing, automatically creating routes based on the file structure. This makes it easy to handle dynamic product pages and category listings.
• Remix allows for nested routes, which can be incredibly useful for eCommerce stores with complex page structures (e.g., product detail pages, checkout flows, etc.). Remix’s data preloading also ensures that only the necessary data is fetched for each route.
• Astro provides flexibility with routing, especially for static sites. You can have a clean route structure for things like product categories and individual items. Since it is static-first, it’s ideal for fast-loading pages.
• SvelteKit allows for file-based routing similar to Next.js but with a simpler syntax. It also makes handling dynamic content like product details and categories easy while maintaining a predictable and SEO-friendly URL structure.

By using the routing patterns of these frameworks, you can ensure that your eCommerce website is organized and easy to maintain while also providing clear, search-engine-friendly URLs.

For eCommerce sites, minimizing JavaScript and CSS bundle size is crucial for performance, especially for large websites.

• Next.js and Remix use dynamic imports and code splitting to load only the necessary JavaScript for each page. This ensures that your users only download what’s needed for the current page, reducing the initial load time.
• Astro and SvelteKit use static site generation and partial hydration. JavaScript hydrates only interactive components (like the shopping cart), leading to smaller payloads.

Caching is a crucial strategy for enhancing performance and reducing unnecessary server load. Proper caching can avoid redundant API calls and speed up response times for frequently accessed data. Next.js, Remix, Astro, and SvelteKit all support powerful caching mechanisms (Browser-level, CDN-level, Server-level, and Application-level caching) that let you store product data, images, reviews, and shopping cart states.

• By default, Next.js will cache as much as possible to improve performance and reduce cost.
• Remix is designed to encourage you to leverage the performance characteristics of distributed computing. It doesn't have any cache built-in, but you can either set up a server-side cache or an HTTP cache.

These mechanisms ensure that content is served instantly without repeated requests to the server.

Hosting is a crucial part of performance, especially for eCommerce stores. The closer your content is served to the user (at the edge), the faster it will load. Frameworks are not tied to a single hosting solution, and you should choose the best solution for you, considering pricing and your project requirements. As such:

• Next.js integrates seamlessly with Vercel, providing edge caching and serverless functions that reduce latency and improve performance worldwide. Works well with Netlify as well.
• Remix can be deployed to Cloudflare Workers, Vercel, Fly.io, or other serverless platforms, allowing for edge caching and high scalability.
• Astro can be hosted on any platform, with Netlify and Vercel being popular choices. It also supports edge functions for low-latency delivery.
• SvelteKit is compatible with various deployment targets, including Vercel, Netlify, and Cloudflare Workers. It also supports edge functions for fast global delivery.

Again, note that you can host any framework on any platform. You don’t have to be limited to the ones mentioned above.

In eCommerce, it's essential to avoid blocking user experience with long-running tasks like sending emails or processing background jobs. Instead of making users wait for these actions to complete, you can use an asynchronous architecture.

For example, you can queue that task for later processing rather than sending a confirmation email immediately after order submission. This allows the user to receive immediate feedback (like an order confirmation page) while non-essential tasks like email sending or inventory updates happen in the background.

Using queues for background tasks ensures that your platform can scale efficiently, handle high traffic, and provide a smooth user experience without delays.

Several server-side factors directly impact the user experience when building high-performance eCommerce applications, especially load times and interactivity. Optimizing these can significantly improve Time to First Byte (TTFB), content loading behavior, and overall page responsiveness.

TTFB refers to the time it takes for the browser to receive the first byte of data after making an HTTP request. This is a critical metric because it influences perceived performance. A high TTFB often indicates issues with server response time or inefficient backend processes. Different frameworks have different approaches here.

Suspense with Next.js. Next.js Suspense is a feature that allows you to handle asynchronous data fetching and code splitting with a smoother user experience. Suspense helps delay the rendering of a component until its data is available, which reduces UI flickering and load time for non-critical content.

Next.js's integration with React Suspense enhances performance by enabling developers to "suspend" the rendering of certain UI parts until they have completed their asynchronous tasks (like fetching data or loading resources). This ensures that important content appears faster while secondary or less important components are loaded in the background without blocking the main page rendering.

Example: If you have a product listing page, you can use Suspense to load the main product details first, while the product reviews or related products can be deferred and loaded later in the background.

Defer with Remix. In Remix, deferring data fetching is key to ensuring smooth navigation and improved performance. Remix emphasizes fine-grained control over which parts of the page should load first and which can be deferred for later, allowing you to prioritize above-the-fold content.

Defer in Remix allows you to load non-essential data after the critical page elements have been rendered. For instance, in an eCommerce checkout flow, you might want to defer loading secondary content like product recommendations, related items, etc., until after the main cart data and checkout form are ready to be displayed.

Another important part of developing any website is the development process. The local development process should have a smooth workflow. Let’s see how we can optimize this and make it easier to work with:

• Local Development: Setting up a fast and efficient local development environment is important for productivity. Tools like Docker help you replicate production environments on your machine. This makes testing code, troubleshooting issues, and ensuring consistency between local and production setups easier. Using frameworks like Next.js or Remix with hot reloading also speeds up iteration by instantly reflecting code changes in your local environment.
• Typing (TypeScript): This is for JS-specific projects. TypeScript plays a huge role in catching errors early in development, especially in large-scale eCommerce projects. Enforcing strict typing reduces runtime errors related to type mismatches, which are common in complex applications. This ensures better code maintainability and easier collaboration across teams. For example, managing dynamic product catalogs or cart data in eCommerce sites becomes safer and more predictable when using TypeScript.
• Static Analysis: Static analysis tools like ESLint and Prettier are very helpful for maintaining code quality. These tools automatically enforce code style, prevent common bugs, and help ensure that your codebase remains clean and readable. Integrating static analysis into your development pipeline (e.g., during commits or pull requests) ensures that all code meets team standards, preventing issues like inconsistent formatting, unused variables, or incorrect imports.

Next.js simplifies authentication with middleware and API routes, enabling secure server-side login and session handling logic. Integrate libraries like next-auth for plug-and-play OAuth providers, token-based authentication, and session management.

Remix emphasizes secure data isolation with route loaders and actions, making it easier to manage authentication flows. Use libraries like remix-auth to build authentication solutions with strategies for OAuth, cookie-based sessions, and CSRF protection.

SvelteKit’s hooks (handle and getSession) allow developers to manage authentication and session state effectively. Leverage libraries like sveltekit-auth to integrate providers like Google or GitHub seamlessly or implement custom token-based authentication for APIs.

Astro relies on third-party integrations for authentication, working best with static-first designs. Combine Astro with serverless functions or edge platforms like Netlify or Vercel to handle secure token-based or OAuth authentication workflows.

BTW check the Authentication vs. Authorization blog post, where we extensively discuss the differences and how to do them properly

By leveraging the accessibility features and security enhancements, developers can build eCommerce platforms that are not only inclusive but also resilient to modern threats.

• Next.js  supports middleware for handling authentication and authorization securely. Integrates seamlessly with libraries like next-auth and enables Content Security Policy (CSP) enforcement to guard against XSS attacks. Accessibility vise, you can leverage tools like eslint-plugin-jsx-a11y to enforce accessibility best practices during development.
• With its strong focus on secure data handling, Remix promotes isolated route data loaders, mitigating risks like data leaks. It also offers robust CSRF protection and secure session management via libraries like remix-auth.
• Astro’s flexibility with multiple frameworks makes it easy to integrate existing accessibility tools and libraries. It also integrates well with third-party authentication providers and enforces secure headers through edge deployment platforms like Netlify or Vercel.
• Svelte has built-in support for environment variables and serverless functions to handle sensitive data securely. Use hooks to implement authentication flows and validate user input, reducing risks of injection attacks.

Cookies play a crucial role in eCommerce for session tracking, personalization, and ensuring secure user experiences. Here’s how Next.js, Remix, SvelteKit, and Astro handle cookie management effectively:

• Next.js uses its API routes and middleware to securely set, read, and manage cookies. Use libraries like cookie or next-auth to handle session cookies, ensuring they are HTTP-only, secure, and have appropriate SameSite attributes to prevent CSRF attacks.
• Remix provides a built-in cookies API to define cookie behavior, including encryption, expiration, and path scoping. This ensures secure session or user preferences storage and makes it easy to integrate with loaders and actions for server-side rendering workflows.
• SvelteKit’s handle hook allows developers to parse and set cookies during server-side requests and responses. For secure eCommerce use cases, use libraries like cookies and configure cookies with attributes like Secure, HttpOnly, and SameSite to safeguard user data.
• Astro supports cookie management through server-side functions or middleware when paired with platforms like Netlify or Vercel. Use third-party libraries or native APIs to manage cookies, ensuring compliance with security standards for sensitive data.