Use pre-render to boost Larget Contentful Paint (LCP)

[lewisvoncken]

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 GoogleChrome/rendertron#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 [FEATURE] Allow setting specific javascriptQuerySelectors so you coul… GoogleChrome/rendertron#654 and run it with the following config.json

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

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

Resolved issues:

1. resolves [Issue] Use pre-render to boost Largest Contentful Paint (LCP) #3107: Use pre-render to boost Larget Contentful Paint (LCP)

[PWAStudioBot]

	Fails
🚫	node` failed.
🚫	A version label is required. A maintainer must add one.
🚫	Unit tests in the following files did not pass 😔. All tests must pass before this PR can be merged packages/venia-concept/src/__tests__/index.spec.js
🚫	No linked issue found. Please link a relevant open issue by adding the text "closes #<issue_number>" or "closes JIRA-<issue_number>" in your PR.

	Messages
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Log

ERROR ON TASK: eslintCheck

ERROR ON TASK: unitTests

Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results.json

Generated by 🚫 dangerJS against e4c08b6

[sirugh]

@magento create issue from PR

[sirugh]

@lewisvoncken can you clarify - will this PR have any affect on the code without the rendertron PR you linked?

[lewisvoncken]

@sirugh
This PR depends on this Rendertron PR GoogleChrome/rendertron#654
And is a follow up for [FEATURE] Added default Rendertron support #3058, but that PR is not depend on the Rendertron PR so that's why I splitted it in 2 PRs