Skip to main content
Version: next

A request data flow

When working on a Front-Commerce project, you'll have to handle request, fetch data, and return a response containing data or HTTP metadata. This section explains the big picture of the request data flow in Front-Commerce.

Overview​

Front-Commerce's request data flow combines the power of Remix's architecture with a GraphQL middleware layer. This creates a robust system for handling both server-side and client-side requests efficiently.

Server-side request flow (initial page load)​

The initial page load begins when a user first visits your Front-Commerce application. The browser sends an HTTP request to your server, which is handled by the Node.js Express server. This triggers the server-side rendering process.

Remix then takes over by matching the URL to the appropriate route in your application. During this route resolution phase, it identifies both the matching route module and its parent layout routes, establishing the component hierarchy for rendering.

The data loading phase begins with the execution of each matching route's loader function on the server. These loaders have access to the Front-Commerce Context, which provides essential information such as the request details, user session, platform configuration, and the GraphQL client.

During GraphQL resolution, resolvers typically make GraphQL queries to fetch necessary data. The GraphQL middleware plays a crucial role here by resolving queries across your different services, applying Redis-based caching strategies when configured, and aggregating responses from various backends into a cohesive dataset.

Once all loaders complete their execution, Remix handles the server-side rendering (SSR) process. It renders the React components on the server and produces HTML that includes the complete page content, critical CSS, and serialized loader data for client hydration.

Finally, the server sends the fully rendered HTML to the browser, while the JavaScript bundle begins loading in parallel. This approach ensures users see content as quickly as possible while enabling interactive features once the JavaScript loads.

Client-side navigation​

After the initial page load, Front-Commerce transforms into a single-page application, providing smooth client-side navigation. When a user clicks a link or submits a form, Remix intercepts the navigation instead of allowing a full page reload.

The client-side route matching process begins immediately, with Remix matching the new URL to the corresponding route and determining which loaders need to be re-executed. Data loading happens in parallel, with new route loaders executing simultaneously. GraphQL queries are sent to the server, where the GraphQL middleware resolves them and may utilize cached data to improve response times.

The UI updates seamlessly as Remix processes the new data. Only the components that need to change are re-rendered, and the browser URL updates without triggering a full page reload, maintaining a smooth user experience.

Data flow optimizations​

Front-Commerce implements several key optimizations to enhance performance and user experience. The caching layer utilizes Redis for GraphQL responses, offering configurable cache durations per query and sophisticated cache invalidation strategies.

Data prefetching is another crucial optimization, where Remix automatically prefetches data for links visible in the viewport. This proactive approach significantly reduces perceived loading times during navigation.

The platform also supports streaming server responses, enabling progressive loading of route segments and deferred data loading for non-critical content. This streaming capability ensures users see important content quickly while less critical data loads progressively.

Error boundaries provide robust error handling at the route level, with fallback UI components for failed data loads. This approach maintains application stability even when certain parts of the application encounter issues.

GraphQL layer role​

The GraphQL layer serves as the backbone of Front-Commerce's data flow architecture. It excels at request aggregation by combining multiple backend requests into single GraphQL operations and optimizing data fetching by eliminating unnecessary fields.

In terms of data transformation, the GraphQL layer normalizes data from different sources, implements crucial business logic and validation, and provides a consistent API for the frontend. This abstraction layer simplifies frontend development by providing a unified interface regardless of the underlying data sources.

Performance optimization is built into the GraphQL layer's core functionality. It implements request batching for similar queries, provides field-level caching, and efficiently manages data dependencies to minimize unnecessary data fetching and processing.

To deepen your understanding of Front-Commerce's data flow and its underlying technologies, we recommend exploring these resources: