https://embed.notionlytics.com/wt/ZXlKd1lXZGxTV1FpT2lKbE9UTTVNR0U1T0dVNFltUTBPREE0WW1JeE5qZzVOR0psWmpOaE1tSXlOQ0lzSW5kdmNtdHpjR0ZqWlZSeVlXTnJaWEpKWkNJNklrbGpiM1pzV2pOcU1VUnBRM1ZUUm1WNFRtdHlJbjA9

ScandiPWA is a Client-Side-Rendered (CSR) Single Page Application (SPA) with Progressive Web Application (PWA) capabilities, built with React in Mosaic Architecture.

• Client-Side-Rendered (CSR) - an architecture where the view logic is run in the browser. Such applications may only be written in JavaScript (or a language that compiles to JavaScript).
• Server Side Rendered (SSR) - the opposite of CSR. This is rendered on the server and then displayed in the browser. The SSR applications may be written in PHP, Java, and any other programming language.
• Single Page Application (SPA) - an application that dynamically renders web pages in the browser. Generally, for an application to be considered SPA it should be completely rendered on the client. ScandiPWA uses React library to achieve this.
• Progressive Web Application (PWA) - an application that complies with a specific set of requirements. These requirements include a ServiceWorker presence and web manifest.
  • What is a ServiceWorker?
  • What is a web manifest?
• Mosaic Architecture - is an architecture that implies the use of standalone modules for application arrangement and application themes. This is made possible by an override (What is an override mechanism?) and plugin mechanism (What is a plugin mechanism?) provided by the Mosaic framework.

How ScandiPWA interacts with Magento?

ScandiPWA is developed by Scandiweb as a replacement for Magento 2 SSR front-end. It implements a presentation for most features of Magento 2 and covering most entities (What are Magento entities?).

ScandiPWA can be used as both Magento 2 theme and a storefront. Here is what it looks like:

As you may see, in storefront mode, ScandiPWA and Magento are hosted separately. This means that in storefront mode, ScandiPWA has SEO issues because URLs rewrites are not properly handled (What are URL rewrites?). The storefront mode is used for local development. It allows using remote Magento instances as a data source.

In Magento theme mode, the Magento is responsible for request routing. This means Magento Controllers (What is Controller?) and Magento URL rewrites (What are URL rewrites?) could be used. This allows the implementation of advanced SEO patterns.

<aside> ➡️ In production, most of the time, ScandiPWA is used in Magento theme mode.

</aside>

As a SPA (What is SPA?) ScandiPWA needs an API to retrieve the data. The GraphQl API is provided by Magento 2 (What is a GraphQL API?).