[Issue] Use pre-render to boost Largest Contentful Paint (LCP)

[m2-assistant[bot]]

This issue is automatically created based on existing pull request: magento/pwa-studio#3090: Use pre-render to boost Larget Contentful Paint (LCP)

---

Description

This will add hydrate option when root element has children. This is a follow-up for requested default Rendertron Middleware support in #3058

This PR depends on this Rendertron PR https://github.com/GoogleChrome/rendertron/pull/654 Which allows to keep javascript tags so you can use rehydrate the page.

Acceptance

Verification Stakeholders

Specification

Verification Steps

1. Spin up Rendertron based on this PR https://github.com/GoogleChrome/rendertron/pull/654 and run it with the following config.json

{
  "cache": "filesystem",
  "cacheConfig": {
    "cacheDurationMinutes": 120,
    "cacheMaxEntries": 50,
    "snapshotDir": "~/tools/rendertron/snapshots"
  },
  "stripSelectors": "",
  "port": "3000",
  "closeBrowser": true
}

2. Add the following lines to your .env

RENDERTRON_URL=https://localhost:3000/render
RENDERTRON_USER_AGENTS="^((?!HeadlessChrome).)*$"
RENDERTRON_EXCLUDE_URL_PATTERN="graphql|\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)"

3. When you now visit the page you get a pre-render response which can be re-hydrated.
4. The config is set to use a cache layer so now you can use SEOSnap to use as a CacheWarmer
5. When rendertron is not running it will automatically fallback to the default render functionality

Screenshots / Screen Captures

Pre-rendered

Not Pre-rendered

[sirugh]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

:white_check_mark: Jira issue (https://jira.corp.magento.com/browse/PWA-1659) is successfully created for this issue.