POC: Generate static HTML for QA nodes in Next via SSG

jkalexander7 commented 2 years ago

Description

We need to prototype generating static HTML via Next static site generation and take benchmarks for research purposes.

Acceptance Criteria

[x] QA nodes that should be rendered as full pages are generated as static HTML files.
[x] The directory structure of the HTML files should reflect the path aliases (URLs) for each node
[x] Metadata is populated in each HTML page and is equivalent to current state
[x] Benchmarks are recorded for time to generate

Implementation details

QA nodes have a field field_standalone_page. If the value is truth-y, the node should be rendered as a page; if it is false-y, it should not be rendered as a page.

Shape of HTML output.
via JSON:API, how to pull path alias with an individual piece of content

Benchmarks:

rendering time - what to measure
how does network connectivity affect the build

CMS Team

Please check the team(s) that will do this work.

[X] Platform CMS Team

amponce commented 2 years ago

Current Branch: https://github.com/department-of-veterans-affairs/content-api-react-poc/pull/9

NextJS generates the static files in less than 10 seconds which is amazing! But I've run into an issue building the url path with a dynamic [slug].

In my latest PR the pages are currently generated by Id and output to out/core. It looks like the default behavior for requesting content by path.alias isn't supported however I found found a plugin that might help [JSON:API Decoupled Router . Also Neil wrote about this in his Product API POC so it shouldn't be too hard to resolve.

Product API

amponce commented 2 years ago

Directory structure is now reflecting the expected path alias:

Page Output
┌ ○ /
├ /_app
└ ● /resources/[...slug]
├ /resources/can-i-be-buried-in-arlington-national-cemetery ├ /resources/what-does-burial-in-a-va-national-cemetery-include ├ /resources/how-can-i-find-a-va-facility ├ /resources/how-can-i-stay-informed-about-covid-19-vaccines-at-va ├ /resources/are-service-dogs-allowed-in-va-facilities ├ /resources/can-i-plan-ahead-for-my-burial-in-a-va-national-cemetery └ [+12 more paths] ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)

amponce commented 2 years ago

Meta Data from Resource page Example output

<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8" />
    <meta name="description" content="va.gov" />
    <link rel="canonical" href="https://va-gov-cms.ddev.site/resources/are-service-dogs-allowed-in-va-facilities" />
    <meta property="og:url" content="https://va-gov-cms.ddev.site/resources/are-service-dogs-allowed-in-va-facilities" />
    <meta property="og:type" content="website" />
    <link rel="image_src" href="https://www.va.gov/img/design/logo/va-og-image.png" />
    <meta property="og:image:alt" content="U.S. Department of Veterans Affairs" />
    <meta property="og:site_name" content="Veterans Affairs" />
    <meta property="og:title" content="Are service dogs allowed in VA facilities? | Veterans Affairs" />
    <title>Are service dogs allowed in VA facilities? | Veterans Affairs</title>
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content="https://www.va.gov/img/design/logo/va-og-image.png" />
    <meta name="twitter:image:alt" content="U.S. Department of Veterans Affairs" />
    <meta name="twitter:site" content="@DeptVetAffairs" />
    <meta name="twitter:title" content="Are service dogs allowed in VA facilities? | Veterans Affairs" />
    <meta name="next-head-count" content="16" />
</head>

amponce commented 2 years ago

Web Vitals are a set of useful metrics that aim to capture the user experience of a web page.

Resource page metrics

Next.js-hydration

id: "1647366480592-8447507885613" label: "custom" name: "Next.js-hydration" startTime: 961.4000000059605 value: 31.400000005960464

FCP

id: "v2-1647366480615-4558342966010" label: "web-vital" name: "FCP" startTime: 1007.9000000059605 value: 1007.9000000059605

TTFB

id: "v2-1647366480616-9010998597795" label: "web-vital" name: "TTFB" startTime: 0 value: 437.30000001192093

department-of-veterans-affairs / va.gov-cms