[feature]: Framework Requirements for PWA

[mcelikx]

Is your feature request related to a problem? Please describe.

Yes, our experience with PWA Studio has highlighted a number of issues, both for developers and e-commerce owners. These issues are related to SEO, lack of SSR, poor DX, insufficient libraries, and Pagebuilder. If PWA Studio continues down its current path, it risks becoming an ineffective and uncompetitive tool in the e-commerce space.

As developers, we have encountered the following problems:

SEO: Many PWA Studio websites do not perform well in terms of SEO due to a lack of pre-rendered pages and poor page speed. SSR: Implementing SSR for PWAs has been challenging, and as a result, we have missed out on many new features of web development. DX: Magento should consider the needs of developers using PWA Studio. In a rapidly changing technology landscape, developers want to build and extend their code easily, but PWA Studio is not currently meeting these needs. Insufficient Libraries: Some of the libraries used in PWA Studio, such as "React-Slick", "informed", and "tailwind", should be updated or replaced with more effective alternatives such as "Swiper", "Formik", and "Tailwind v3". Pagebuilder: The current Pagebuilder in Magento is difficult for end-users to use and results in unresponsive pages or blocks.

Describe the solution you'd like I believe that rebuilding PWA Studio from scratch using a SSR powered Framework (backed with React or Vue) is the solution to these problems. By doing so, we can achieve the following benefits:

SEO: PWA Studio will be able to generate pre-rendered pages that are optimized for SEO, resulting in better website visibility and search rankings. SSR: By utilizing great SSR implementations available in the market, such as ISR of Next.js, PWA Studio can provide better performance and new web development features, especially for PDPs. DX: Developers will be able to build their systems with new and performant tools, and PWA Studio will be able to offer an Extension/Module system similar to those found in frameworks like Nuxt.js. Insufficient Libraries: By considering more effective alternatives to existing libraries such as "React-Slick", "informed", and "tailwind", such as "Swiper", "Formik", and "Tailwind v3", PWA Studio can provide better functionality and features. Pagebuilder: By integrating better CMS builders available in the market such as "Hygraph" and "Strapi", we can create a more user-friendly Pagebuilder. New React Ecosystem: By standardizing on a framework such as Next.js, Remix.js or Gatspy.js, PWA Studio can align with React's suggested ecosystem and provide developers with the tools they need to build great e-commerce solutions. Typescript Support: Typescript support should be integrated to improve code quality and maintainability.

Describe alternatives you've considered -I suggest that PWA Studio decision-makers should consider using frameworks such as Next.js, Remix.js or Nuxt.js to address these issues.

Additional context Pwa-Studio decision makers should look into bright e-commerce solutions:

• Shopify - Hydrogen @Shopify -I think it is the best solution in market. It is backed by Remix.js
• Graphcommerce @graphcommerce-org - In my opinion, it is one of the e-commerce solutions with the brightest future. It is backed by Next.js
• Ikas @ikascom - I think this ecommerce solution will soon reach a very common and prestigious place in the world with the works they have created in a very short time. It is backed by Next.js
• Vue Storefront @vuestorefront - A technology with very robust implementation and community. It is backed by Nuxt.js

Please let us know what packages this feature is in regards to:

• [x] venia-concept
• [x] venia-ui
• [x] pwa-buildpack
• [x] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec
• [x] create-pwa

[m2-assistant[bot]]

Hi @mcelikx. Thank you for your report. To speed up processing of this issue, make sure that you provided sufficient information. Add a comment to assign the issue: @magento I am working on this

---

Join Magento Community Engineering Slack and ask your questions in #github channel.

[glo82145]

Hi @mcelikx .. As these seems to be major enhancement hence we have forwarded this request to our PO. We are waiting confirmation from their side. We will keep you updated.

Thanks

[mcelikx]

Hi @glo82145, I'm excited that you even offered it to your PO. PWA developers around me and i will contribute much more to alternatives that can be developed with Next or Remix frameworks.

If the infrastructure provided by Magento can be used with a strong SSR Framework, the product that will emerge will offer a very useful structure in the e-commerce sector.

I hope that your PO's views on this matter will be positive.

Thanks

[tkacheva]

Hi @mcelikx, PO is here :-) Thanks for putting a proposal together. You correctly pointed out that implementing suggested framework changes will essentially mean creating a brand new storefront solution. Here in Adobe we have no plans to introduce new storefront. Instead, we are taking API-first and composable storefront approaches. Standalone frontends will continue to be available to surface Adobe Commerce Merchant Services such as Live Search and Catalog Service as well as Core Commerce functionality such as Cart, Checkout, Account Management.

[huykon]

@tkacheva Don't we have any plan to improve the pwa-studio code for SEO (use another framework like NextJS or Remix)?