[doc]: Backend architecture + caching

[brendanfalkowski]

Describe the request Our team had a discussion today following this PR for client-side caching in PWA: https://github.com/magento-research/pwa-studio/pull/1152

The backend dev + DevOps side is hungry for info on a few areas (which are not my area):

1. Does Apollo have a server-side caching implementation? UPWARD seems to define itself against managing this, so where would it live?

2. Does Magento FPC have any role in PWA?

3. Does Varnish have a role in PWA?

4. Does Redis have a role in PWA?

5. Should M2 core + PWA code run on the same server instance? Why or not? At what scale does separating their physical infrastructure make sense?

Possible solutions Server-side architecture

Please let us know whether this is a new topic or a topic change request:

• [x] New Topic Request (ie. missing entire topic/section)
• [ ] Topic Change Request (ie. spelling, organization)

[zetlen]

Hey @brendanfalkowski, these are good questions. I'm gonna give brief beginnings of answers here, but this issue stays open to track our work to answer them in more detail.

1. Apollo Server is a fully-featured NodeJS GraphQL server, so it does have caching. However, we don't use Apollo Server in today's PWA Studio codebase. UPWARD specifies a GraphQL client interface, but not a server interface; the UPWARD layer is supposed to consume GraphQL from a backend, and not necessarily to serve its own GraphQL API (apart from proxying).

   This can be confusing, because Apollo Client has some cool integrations with Apollo Server, and the docs at apollographql.com often describe them along with other, more general tutorials.

2. I don't think Magento FPC has any role in the PWA Studio architecture as currently designed. The Magento FPC feature is built in to the layout resolution layer, as a Magento-specific Varnish configuration. (I believe--it's not my area of expertise). PWA can also have Varnish running on top of the UPWARD server, and in our cloud configuration it does. So we can reproduce a full-page cache scenario pretty easily, especially because the render pipeline for PWA Studio full pages is simpler.

3. See above--PWA Studio is unopinionated about Varnish, because it's not a full-stack monolithic platform, but it works well with Varnish in our own deployments and partner deployments.

4. Redis can be used with our current codebase to cache optimized image output from the onboard express-sharp middleware. We don't have any other explicit Redis integrations, but I can see where it would be a huge benefit. You could implement intermediary catalog caching, or caching of UPWARD resources. It's just not a part of PWA Studio in general; our codebase is intentionally free of server-side state.

5. I think the current wisdom is that you should not have more than one feature running on a server instance, let alone more than one tech stack. 😅I don't personally demand that, and our architecture doesn't either. But all our existing deployments, including veniapwa.com and others, have their UPWARD middle tier deployed on separate hardware or IaaS than the Magento instance. One exception is our Cloud Pro tier, which has a highly optimized PHP environment. So we run upward-php and its Magento connector in that situation, and it works great.

Again, these are the beginnings of answers and not the ends. I'm sure you and your team will have followup questions. Once we clarify things, we can start on the docs themselves.

[brendanfalkowski]

@zetlen — Thank you, I'll relay with my full authority on these subjects.

[zetlen]

@brendanfalkowski Just a quick ping: does your team have any followup questions? We want to check before we proceed with a document clarifying this. Right now, the rough draft outline is as follows:

How A PWA Studio App Connects To Magento

• "Headless" Architecture Overview
• Magento's microservice push
• Runtime architecture
  • API-only relationships
  • GraphQL for client data and store behavior
  • REST for patching missing GraphQL coverage
  • REST/RPC for potential admin-authorized UPWARD calls
  • HTTPS for passing through to static & media resources
  • One-way coupling
  • Magento attached as service
  • Admin "unaware" of PWA
  • Future: Staging/Preview adds naive concept of "staging domains" only
  • Decoupled deployments
  • Storefront and backend deployed on separate hardware
  • UPWARD allows even separate technology stacks
  • Optionally deploy UPWARD on the Magento instance directly (legacy)
  • Config dependency at build-time only
  • Storefront replacement mechanism
  • Via reverse proxy
  • Via magento-upward-connector
  • Future: via Magento native configuration
• Build-time architecture
  • Magento store dependency
  • Circular dependency with one target
  • Stepped dependencies with dev->staging->prod environments
  • Obtaining GraphQL schema
  • Static analysis of Magento config at build-time
  • Future: All relevant config in GraphQL, cached schemas & responses
  • Build pipeline
  • NodeJS and Webpack
  • Open-ended bundle and template creation
  • Repository organization
  • PWA code vs Magento code
  • Dependency management
  • Cloning versus scaffolding

We plan to expand on these subjects. Is there anything missing?

[brendanfalkowski]

@zetlen — This looks great to me, but I pinged teammates to comment here if they have questions.

[jcalcaben]

Closing this issue since #1348 has been created to track the effort described by Zetlen in this issue.

[sakshilakshkar]

Any guidelines to make custom changes with PWA components or how to override them How can venia components overridden ?

[tsfanning21]

Late to the party but this was posted above:

Does Magento FPC have any role in PWA?

As of 2.4.3 - The answer is yes. Magento FPC has a role in PWA, specifically for caching. If you want to setup a CDN, and you will want to do this. You will need to have FPC turned on for Magento to send the correct Cache-Control records on your graphql requests. This is all super annoying because FPC/Cache and http header records are all co-mingled in the Magento 2 codebase. This probably made sense before headless was a thing but it does cause problems today.

[secaliskan]

So at the end now in 2024 with the latest release of PWA Studio; what is the default.vcl for PWA Studio Varnish configuration. Magento 2.4.7 at admin already producing the default.vcl but for PWA studio still there is no default.vcl for Varnish 6 or 7.

Who will provide this to us? We are developing PWA Studio storefronts but we have problems with varnish and what I see we need this.

For large catalogs GraphQL product queries is not efficient.