The challenges of creating a PWA for Magento and how we overcome them
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.
Pre-rendering: the frontend App is run on the server, in a headless browser. The resulting HTML is served instead of the app.
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
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
GETrequest 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.