Pwa-studio: [feature]: SEO optimization for UPWARD with react-ssr

[ericerway]

Is your feature request related to a problem? Please describe.
Our current solution for SSR is flexible for UPWARD but can be improved with recent updates to react-ssr and other proposals as mentioned in #510. SSR is achieved using mustache templates in UPWARD.

Describe the solution you'd like
Adding an option for react-ssr to UPWARD (configurable) gives us an option for simple SSR but leaves the flexibility of templates defined initially in the protocol. Efforts would include:

• Adding a react template engine to the upward-js TemplateResolver
• Reviewing and adjusting Venia code to render full pages in react-html, without a browser DOM
• Dockerizing upward-js with react-html support and providing a ready-made Docker image for an UPWARD server
• _Nice to have:_ Writing the React template engine as a separate service or process for maximal compatibility with upward-php and other implementations

Describe alternatives you've considered
Current approach for SSR is viable, but prioritizes portability and server stack independence over simplicity of code. Either SSR is limited to the metadata and app shell, or the project must have code duplication in React components and templates.

Additional context
Research needed to create POC, test and optimize these improvements to UPWARD which may require additional issues for grooming.

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

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

[paales]

Wanted to comment on this as we've been burned very heavily in the past when relying on client side rendering only and we've came to the conclusion that proper SSR is absolutely required.

In the end, even though Google can render pages with their headless chrome instance, but their html-scraper is x-amounts of time as fast, which reflects in the ranking of a page.

And besides that, 'pre rendering' on the server allows for faster initial paint because the server is able to determine critical css, the rendered dom, etc.

And in a few months React comes out with their new SSR Streaming server tech that they are building for the new Facebook 5 launch. This will make the SSR option even more attractive.

I've been trying to get NextJS as an operating backend for the frontend, but ran into issues that the venia-ui theme currently still relies on client side API's and need to be refactored or they need to be moved to a client side only renderer (which nextjs can do fairly easily).

[disvroian]

Hello;
Is there any follow up on this?
Or any solution good to use to do SEO?

[BioSehnsucht]

This was just released but I'm unclear on how to use it with PWA (they have a flowchart but it doesn't show how/where it would actually connect to PWA, etc)

https://seosnap.io/ / https://github.com/experius/SeoSnap

I would prefer something that didn't require quite so much extra baggage to implement, myself.

[awilcoxa]

Addressing with extensibility framework/POC from @zetlen, closing this issue for now and will follow up with additional issues/stories

[paales]

@awilcoxa Can you link this issue in the replacement issues/stories?

[paales]

@awilcoxa Not wanting to get this forgotten, are followup tickets created?

[davemacaulay]

@ericerway can we share more information with @paales regarding his questions?

[beHitesh]

Hi, Do we have any documentation or implementation examples for SSR support? It would be really helpful- thank you.