Challenges

The challenges of creating a PWA for Magento and how we overcome them

SEO

Search Engine Optimization (SEO) is important to us, as it drives organic search discoverability and sales. It involves making sure that search engines can crawl the application to index its content.

Traditionally, crawlers are not built to handle Client-Side Rendered (CSR) applications. CSR happens entirely in JavaScript, and most crawlers don't run JavaScript at all - therefore, they will be unable to see the application's content unless we take this into consideration.

While some crawlers may now be able to run JavaScript, we still need to ensure that all search engines can index our app. This can be achieved with several different approaches, all of which involve rendering part of the app on the server, and responding with that result.

Dynamic rendering: the web server needs to detect crawlers. For crawlers, it serves a pre-rendered version of the app, but for other clients, it serves the regular JavaScript app.

Pre-rendering: the frontend App is run on the server, in a headless browser. The resulting HTML is served instead of the app.

API Complexity

The traditional style of building APIs is REST. It involves creating multiple endpoints that the client can use to fetch and manipulate resources. However, for a large application such as Magento, the REST approach starts encountering problems:

• Increasing numbers of endpoints are hard to keep track of and remember

• Additional data returned by each endpoint (sometimes unnecessarily) grows the size of the response

To address these problems, Magento also supports a GraphQL API. ScandiPWA builds on the GraphQL API and uses it in the frontend app, due to its advantages:

• GraphQL only offers 1 endpoint with well-documented queries

• The client can now request only the data it needs, saving bandwidth

• Endpoints and their datatypes are documented when defining the schema, which is checked by GraphQL

GraphQL Caching

Using GraphQL creates an additional challenge - we need to find a way to cache API requests, which could easily be done with REST. By default, Magento sends the full query as a stringified JSON parameter, to take advantage of GET request caching. Despite this method's simplicity, it creates a limitation in query size, as the maximum URL length cannot be exceeded. In addition, this strategy requires the full query to be sent every time, increasing bandwidth usage.

ScandiPWA uses an alternative approach - the persisted query method. Initially introduced by Apollo, this approach involves transforming each query into a short identifier, which solves the caching problem and saves bandwidth, at the cost of some additional requests made.