It is question that I'm being asked frequently: When you setup a hosting environment for PWA Studio, do you need Node on the server? Magento itself has responded frequently with an answer that you don't need Node. But often in such a response, technical aspects are missing. Also, answering this question is not that simple at all. Let me have a try at it.
You need Node on the server to run Magento PWA Studio
So let me start by saying this: You need Node on the server to run Magento PWA Studio. No, I'm kidding. The answer is more complicated. It requires more effort to get to the right answer. The real answer should be: Yes and no, it depends. And most importantly, maybe, you can host Magento PWA Studio without requiring Node, thanks to the Magento UPWARD module written in PHP. Or maybe that's just a silly workaround. Ha ha ha, I'm having a ball here.
Maybe the question itself is wrong. You can run PWA Studio both with Node and without Node. A better question is maybe: Why would you need Node on the server in the first place? What benefits does it give? As always, we need to dive into the details before you can answer the question properly.
The PWA of Magento PWA Studio
Let's dive into the stack first. I often explain that the product suite that Magento labels as Magento PWA Studio is composed out of three words: Magento, PWA and Studio. Magento being the creator, PWA being the thing that we are building, Studio as a means to build it. If we are saying that we are running Magento PWA Studio somewhere, it is actually a wrong statement: You run only the Studio in development by means to produce a PWA and that PWA is then pushed towards production.
PWA Studio offers various tools to help you develop your own PWA based on React: There is a collection of UI components in the Venia UI library. The Venia Concept theme allows you to quickly put things together. The Peregrine library offers some more fundaments. Buildpack offers a Webpack-based development environment, including a local Node server. And last but not least, there is UPWARD, which is something that even James Zetlen can't explain. I'm still having a ball here.
The UPWARD part is quite essential in this blog though. Let's get to that point later.
What is the end result?
It sounds kind of simple, right? However, this blog is not necessarily for the newbies. I assume you know what PWA stands for and that you grasp what kind of opportunities it gives you. The point is to simplify something that is often seen as quite complex: The dynamic nature of a PWA simply boils down to a regular webpage.
fetch as well.
Deploying a PWA to production
It becomes a bit more complex when you also want to host the PWA on the same domain as Magento. It makes it easier to cope with other issues like SSL certificates and cross-domain scripting. But it also requires a clever setup of the webserver (Nginx or Apache) to decide which files to resolve when: PWA files or Magento files. I'm intending to write a blog on this soon, because such an Nginx configuration is actually dead-simple.
What is UPWARD?
With the right setup, you even do not need the Magento UPWARD module within Magento to run Magento PWA Studio: You can simply modify a couple of lines in the PWAs
src/index.js file so that UPWARD is bypassed for GraphQL calls to Magento. And static files are resolved by Nginx.
However, in a development environment, you definitely have a benefit of UPWARD: It allows you to play with a custom domain and SSL-certificate (actually generated by buildpack) without running into cross-domain issues and CORS errors. There are different workarounds for CORS (my own Yireo module, Heroku corsanywhere app). But still, you could say UPWARD is useful in development.
My main point so far is: You don't need Node in a production environment. And you don't need UPWARD either. However, this is still not the full story. Because we need to add in Server Side Rendering into the picture.
What is Server Side Rendering?
O my god, could you explain again why this is needed?
In short, for SEO purposes and definitely when money is involved (like with e-commerce sites), Server Side Rendering seems a must.
Prerendering or on-demand SSR
The simplest way of getting some kind of Server Side Rendered output on the server is to open up your webpage in the browser, copy its HTML source and paste that on a static page on the server. Perfect.
Besides prerendering, there is also the option of on-demand SSR: As soon as the request is received by the server, it calls upon some SSR mechanism that generates the page.
What do you need for SSR?
With prerendering, there are scenarios where you simply modify your Nginx configuration and connect it to the SSR mechanism. There are other prerendering scenarios where Node is needed, but you don't necessarily need a Node server for this. However, for the on-demand SSR, it is most common to have a server-based Node app that calls upon the client-side part of the code to prerender this. It involves things like Reacts
In general, most developers that implement SSR implement this with Node. You need Node on the server, if you want SSR. And if you care about SEO, you do want SSR.
With Server Side Rendering, the complexity of a simple PWA goes up. Instead of just using React or Vue to build a frontend quickly, suddenly you need to take into account a complexer server setup. And why? To accomplish something that was already out-of-the-box possible with PHP-driven applications. It sounds like a crazy loop.
However, don't forget the progressive part of PWA: Thanks to the fact that client-side rendering is still used as well, we can still use progressively features in the browser, like push notifications, offline pages, new browser APIs, etcetera.
SSR services & Node middlewares
With SSR being quite a complex topic, I hope to see more and more SSR prerendering services to be offered on the market: This way, the developer is able to focus on React or Vue development, while the service provider takes care of SSR.
Likewise, the option for a Node middleware layer is also there. But perhaps, agencies don't need to build these themselves, but can reuse Node middlewares of others. Kind of like, middleware-as-a-service (MaaS). Maasento.
Do realize that PWA is the future and that SSR is required to make SEO a success. And between all of those three-letter acronyms (TLA), the right approach is needed. And as of yet, most people use the Node approach, so perhaps you should as well. Is Node needed on the server when running Magento PWA Studio? If you are new to this topic, most likely yes.