V2 - New preset `v2-mst-aptd-gcms-lcz-sty` with hybrid SSG/SSR instead of SSR-only (based on `v1-ssr-mst-aptd-gcms-lcz-sty`) #68

Vadorequest · 2020-05-30T12:26:09Z

Demos

https://v2-mst-aptd-gcms-lcz-sty.vercel.app/ uses the latest branch commit
https://nrn-v2-mst-aptd-gcms-lcz-sty-c1.vercel.app/ is the production environment for Customer 1
https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-preview.vercel.app/ is the preview/staging environment for Customer 1 (with Preview mode enabled)
https://nrn-v2-mst-aptd-gcms-lcz-sty-c2.vercel.app/ is the production environment for Customer 2
https://nrn-v2-mst-aptd-gcms-lcz-sty-c2-preview.vercel.app/ is the preview/staging environment for Customer 2 (with Preview mode enabled)

Status

This PR/branch is stable and has been added as the new official/default NRN preset.

We still have some features to implement, but they're secondary.

Notes

This PR is not meant to be merged, but to provide a diff against the base branch (which was a preset using SSR-only, and has been deprecated now that v2 is released)

PR from #42 (preset branch was renamed, thus forcing us to open a new PR), useful for extra context (discussions about technical implementation)

New features in this PR:

Language detection and redirect to preferred language (using experimental redirects/rewrites)
Sub locales support - fr, en, fr-FR and en-US are possible (change url directly to see it in action, or use the footer language icon)
Use of hooks in favour of HOCs whenever better
SSG/SSR compatible Apollo client (GraphCMS backend for demo)
Automatic static optimisation enabled (no _app.getInitialProps)
SSG-first (my own personal goal is to use 100% SSG web apps, but we do support hybrid apps out of the box)
Reusable getStaticProps/getServerSideProps (not supported to use them app-wide in _app yet, so we made reusable helpers instead)
Proper rehydration and server/bowser reconciliation, following https://joshwcomeau.com/react/the-perils-of-rehydration
Examples with SSG/SSR, and dedicated SSG examples with fallback/revalidate options
Improved errors handling (top-level, etc.)
Next.js v9.4.0
Track perfs statistics "web-vitals-metrics"
Complete redesign of the demo app (v2)

Roadmap - In progress

Roadmap - Backlog

E2E (tests or redirections, url rewriting, navigation, i18n-related features)

Done

✅ Check TS props types match actual props
✅ Tests how errors behave
- See _app. componentDidCatch is deprecated in upcoming v9.3.7 - Is the Sentry example still valid? vercel/next.js#12562 (comment)
Refactor GQL queries (lots of duplicated code atm)
✅ Refactor withApollo ssr option which was designed for <v9.3 and doesn't consider getServerSideProps option, and is confusing
✅ Refactor the _document
✅ _app using functional component - See i18next & common questions #46 (comment)
✅ Upgrade to Next.js v9.4.0
✅ Track perfs statistics "web-vitals-metrics" (new v9.4 feature) https://nextjs.org/blog/next-9-4#integrated-web-vitals-reporting
- See feedback at Feedback on v9.4.0 Core Web Vitals (LightHouse) - Amplitude implementation vercel/next.js#12959
✅ Improve demo LightHouse performances
- See New preset with hybrid SSG/SSR (replaces SSR-only with hybrid rendering modes support) #42 (comment)
✅ 🐛 Support public folder properly
- Fixed by fad1e2d
✅ Upgrade node.js version used by CI (use v12 instead of v10)
✅ Change language without full page reload (use router instead)
✅ Do not deploy .test functions
✅ ❤️ Add more example + restructure examples (UI/UX) - Would love some community help on this, it's basically redesigning all pages and workflow to make it more dev-friendly
- Status tracked at Improve demo (UI/UX) + better examples #45
✅ Add revalidate example
✅ Add fallback example
✅ Update general documentation about this new preset (v2)
✅ New example using preview mode for dev/staging environment, will be useful for the SSG page that load data from GraphCMS (e.g: /examples), header/footer components will be pure SSG and won't use preview mode

Optional other improvements

Sitemap - See Generate sitemap for static site with dynamic routes vercel/next.js#12403 and https://github.com/axross/kohei.dev/blob/master/pages/sitemap.xml.ts
Reflexion regarding "page dynamic data", to keep them separated from other "common" page data (common to all pages)
- See Best practices for dynamic data page-related vercel/next.js#12655

On hold (stuck, any help appreciated)

Configure CodeSandbox project for easier "playing around" and reproducible example to help 3rd party issues debug
- WIP, doesn't work properly - See CodeSandbox template #65
Optimise bundle (dependencies, e.g: winston)
- Some libs are just too heavy for what benefits they provide, the goal is to only keep what's really useful
- See It is possible to drop winston dependency in production? #49
- Opened a feature request Feature request - Built-in universal logger vercel/next.js#13594
"App context" - Clarify combinations of rendering modes and options
- The goal is to provide a reliable API (context/hook) to help devs understanding how the page was served and implement different behaviours depending on it
- See What is `__N_SSG`? vercel/next.js#12558 (reply in thread)
- See Distinguish between client- and server-side call of `getServerSideProps` vercel/next.js#12240

Known bugs

All fixed

Vadorequest · 2020-05-30T12:26:13Z

[GitHub Actions]
Deployment SUCCESS
Commit e370bf5 successfully deployed to https://nrn-v1-hyb-mst-aptd-gcms-lcz-sty-c1-ao0l3r888.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

Vadorequest · 2020-05-30T12:34:10Z

[GitHub Actions]
Deployment SUCCESS
Commit 27919d0 successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-4p23y8r43.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

Vadorequest · 2020-05-30T12:38:03Z

[GitHub Actions]
E2E tests FAILED
Download artifacts (screenshots + videos) from checks section at the top

Vadorequest · 2020-05-30T12:58:01Z

[GitHub Actions]
Deployment SUCCESS
Commit 9816507 successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-6yil4uia1.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

Vadorequest · 2020-05-30T13:01:11Z

[GitHub Actions]
E2E tests SUCCESS

Vadorequest · 2020-05-30T23:22:42Z

[GitHub Actions]
Deployment SUCCESS
Commit 199a540 successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-4tcdjsq1t.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

Vadorequest · 2020-05-31T13:02:22Z

[GitHub Actions]
Deployment SUCCESS
Commit 337fb99 successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-c8i45yt8m.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

Vadorequest · 2020-06-01T14:05:53Z

[GitHub Actions]
Deployment SUCCESS
Commit df72481 successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-q5pe4nyup.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

Vadorequest · 2020-06-02T08:11:08Z

[GitHub Actions]
Deployment SUCCESS
Commit fd494c6 successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-knuljgn6i.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

src/pages/[locale]/examples/built-in-utilities/api.tsx

…ial recommendations) for server-side fetching

Vadorequest · 2020-06-02T23:30:37Z

[GitHub Actions]
Deployment FAILED
Commit 628f205 failed to deploy to (click to see logs)

Vadorequest · 2020-06-03T00:00:55Z

[GitHub Actions]
Deployment SUCCESS
Commit 119a4a2 successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-k0jrkvp5p.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

src/utils/data/record.ts

…e been removed a long time ago, was installed as dep)

Vadorequest · 2020-06-03T01:04:33Z

[GitHub Actions]
Deployment SUCCESS
Commit 2888c12 successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-an7m6e32c.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

Vadorequest · 2020-06-03T01:13:45Z

E2E are failing again, seems related to vercel. Maybe they changed something, the tests aren't applied on the deployment but on vercel's homepage.

Well, it's working again... I noticed it those few days, seems random, probably a latency issue making tests run too early, before Vercel page is ready?

…t is undefined."

…turn props under nested "props" key (keep similar API between SSG and SSR, better code reusability)

Vadorequest · 2020-06-03T14:09:46Z

[GitHub Actions]
Deployment SUCCESS
Commit 0c3fe60 successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-d9p099cui.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

…arams in SSR pages (wasn't being used)

Vadorequest · 2020-06-03T14:21:16Z

[GitHub Actions]
Deployment SUCCESS
Commit bd308fe successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-8e2pauc1h.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

… code and make TS type extensible

Vadorequest · 2020-06-03T15:34:12Z

[GitHub Actions]
Deployment SUCCESS
Commit 0fd1aae successfully deployed to https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-5y65ioi14.now.sh
Deployment aliased as https://v2-mst-aptd-gcms-lcz-sty.now.sh

github-actions · 2021-06-24T16:12:47Z

✅ Deployment SUCCESS
Commit a5ad627 successfully deployed Storybook static site 📖 to https://nrn-v2-mst-aptd-gcms-lcz-sty-storybook-gfu1195c7-unly-oss.vercel.app
Deployment aliases (1): nrn-v2-mst-aptd-gcms-lcz-sty-storybook.vercel.app

github-actions · 2021-06-24T16:17:02Z

✅ E2E tests SUCCESS for commit a5ad627 previously deployed Storybook static site at https://nrn-v2-mst-aptd-gcms-lcz-sty-storybook-gfu1195c7-unly-oss.vercel.app

…try/init"' has no default export."

* Re-export Sentry from init (DX) and call init from error endpoint to see if it fixes the issue with flush() timeout * Improve sentry init documentation + rollback to timeout 2s + auto-init Sentry when using configureReq * Implement better error handling on _error page (enrich Sentry metadata from req object) * Fix 404 error handling and reporting to Sentry * Improve documentation about error handling * Upgrade Sentry to latest (minor)

github-actions · 2021-06-25T08:00:34Z

✅ Deployment SUCCESS
Commit 5ea63ac successfully deployed Storybook static site 📖 to https://nrn-v2-mst-aptd-gcms-lcz-sty-storybook-fzs6017tx-unly-oss.vercel.app
Deployment aliases (1): nrn-v2-mst-aptd-gcms-lcz-sty-storybook.vercel.app

github-actions · 2021-06-25T08:04:53Z

✅ E2E tests SUCCESS for commit 5ea63ac previously deployed Storybook static site at https://nrn-v2-mst-aptd-gcms-lcz-sty-storybook-fzs6017tx-unly-oss.vercel.app

github-actions · 2023-01-23T09:28:25Z

✅ Deployment SUCCESS
Commit 06a6a37 successfully deployed Storybook static site 📖 to https://nrn-v2-mst-aptd-gcms-lcz-sty-storybook-3kgtlv1hh-unly-oss.vercel.app
Deployment aliases (1): nrn-v2-mst-aptd-gcms-lcz-sty-storybook.vercel.app

github-actions · 2023-01-23T09:34:05Z

✅ E2E tests SUCCESS for commit 06a6a37 previously deployed Storybook static site at https://nrn-v2-mst-aptd-gcms-lcz-sty-storybook-3kgtlv1hh-unly-oss.vercel.app

github-actions · 2023-04-11T14:25:21Z

❌ Deployment FAILED
Commit c5d5eb9 failed to deploy Storybook static site to
click to see logs

Vadorequest mentioned this pull request May 30, 2020

New preset with hybrid SSG/SSR (replaces SSR-only with hybrid rendering modes support) #42

Closed

Vadorequest added the preset-branch This branch is a preset and is not meant to be merged, but to be used as a DIFF tool for learning. label May 30, 2020

Vadorequest added this to Released in Presets roadmap May 30, 2020

samuelcastro reviewed Jun 2, 2020

View reviewed changes

src/pages/[locale]/examples/built-in-utilities/api.tsx Outdated Show resolved Hide resolved

Vadorequest added 3 commits June 3, 2020 01:22

Add fetchJSON utility, based on best-practices from Vercel (SWR offic…

f158733

…ial recommendations) for server-side fetching

Misc - Avoid using getValueFallback (not necessary)

94b63b9

Remove record utility (not used anymore)

628f205

Fix forgotten import

119a4a2

samuelcastro reviewed Jun 3, 2020

View reviewed changes

src/utils/data/record.ts Outdated Show resolved Hide resolved

Remove @types/lodash.filter (buggy with TS types, was supposed to hav…

2888c12

…e been removed a long time ago, was installed as dep)

Vadorequest added 2 commits June 3, 2020 15:30

Fix "TypeError: Cannot destructure property 'message' of 'error' as i…

388db28

…t is undefined."

Make getExamplesCommonServerSideProps and getCommonServerSideProps re…

0c3fe60

…turn props under nested "props" key (keep similar API between SSG and SSR, better code reusability)

Rename StaticParams to CommonServerSideParams + use CommonServerSideP…

bd308fe

…arams in SSR pages (wasn't being used)

Re-implement the previously deleted "record" utility, removed useless…

0fd1aae

… code and make TS type extensible

github-actions bot temporarily deployed to customer1-production June 24, 2021 15:49 Inactive

Use '@sentry/node' instead of Sentry init

a5ad627

github-actions bot temporarily deployed to storybook June 24, 2021 16:01 Inactive

github-actions bot had a problem deploying to customer1-production June 24, 2021 16:01 Failure

Fix TS issue "Type error: Module '"/vercel/path1/src/modules/core/sen…

ed3cfdf

…try/init"' has no default export."

github-actions bot temporarily deployed to customer1-production June 24, 2021 16:37 Inactive

Increase Sentry timeout to 5s, too many failure using 2s...

9a4e137

github-actions bot temporarily deployed to customer1-production June 24, 2021 20:21 Inactive

github-actions bot temporarily deployed to storybook June 25, 2021 07:49 Inactive

github-actions bot temporarily deployed to customer1-production June 25, 2021 07:49 Inactive

Add missing await/flush in API endpoints

cdb9243

github-actions bot temporarily deployed to customer1-production June 25, 2021 08:22 Inactive

Avoids capturing false-positive 404 pages when building the 404 page

53e51a8

github-actions bot temporarily deployed to customer1-production June 25, 2021 10:05 Inactive

[UPDATE] Github Action await-vercel (#383)

e4e2e7a

github-actions bot temporarily deployed to customer1-production October 18, 2021 11:44 Inactive

Change app.graphcms.com to app.hygraph.com

06a6a37

github-actions bot deployed to storybook January 23, 2023 09:21 View deployment

github-actions bot temporarily deployed to customer1-production January 23, 2023 09:21 Inactive

Update Ubuntu from 18.04 to latest (currently 20.04) (#396)

c5d5eb9

github-actions bot had a problem deploying to storybook April 11, 2023 14:23 Failure

github-actions bot deployed to customer1-production April 11, 2023 14:23 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

V2 - New preset `v2-mst-aptd-gcms-lcz-sty` with hybrid SSG/SSR instead of SSR-only (based on `v1-ssr-mst-aptd-gcms-lcz-sty`) #68

V2 - New preset `v2-mst-aptd-gcms-lcz-sty` with hybrid SSG/SSR instead of SSR-only (based on `v1-ssr-mst-aptd-gcms-lcz-sty`) #68

Vadorequest commented May 30, 2020 •

edited

Vadorequest commented May 30, 2020

Vadorequest commented May 30, 2020

Vadorequest commented May 30, 2020

Vadorequest commented May 30, 2020

Vadorequest commented May 30, 2020

Vadorequest commented May 30, 2020

Vadorequest commented May 31, 2020

Vadorequest commented Jun 1, 2020

Vadorequest commented Jun 2, 2020

Vadorequest commented Jun 2, 2020

Vadorequest commented Jun 3, 2020

Vadorequest commented Jun 3, 2020

Vadorequest commented Jun 3, 2020 •

edited

Vadorequest commented Jun 3, 2020

Vadorequest commented Jun 3, 2020

Vadorequest commented Jun 3, 2020

github-actions bot commented Jun 24, 2021

github-actions bot commented Jun 24, 2021

github-actions bot commented Jun 25, 2021

github-actions bot commented Jun 25, 2021

github-actions bot commented Jan 23, 2023

github-actions bot commented Jan 23, 2023

github-actions bot commented Apr 11, 2023

V2 - New preset v2-mst-aptd-gcms-lcz-sty with hybrid SSG/SSR instead of SSR-only (based on v1-ssr-mst-aptd-gcms-lcz-sty) #68

Are you sure you want to change the base?

V2 - New preset v2-mst-aptd-gcms-lcz-sty with hybrid SSG/SSR instead of SSR-only (based on v1-ssr-mst-aptd-gcms-lcz-sty) #68

Conversation

Vadorequest commented May 30, 2020 • edited

Demos

Status

Notes

New features in this PR:

Roadmap - In progress

Roadmap - Backlog

Done

Optional other improvements

On hold (stuck, any help appreciated)

Known bugs

Vadorequest commented May 30, 2020

Vadorequest commented May 30, 2020

Vadorequest commented May 30, 2020

Vadorequest commented May 30, 2020

Vadorequest commented May 30, 2020

Vadorequest commented May 30, 2020

Vadorequest commented May 31, 2020

Vadorequest commented Jun 1, 2020

Vadorequest commented Jun 2, 2020

Vadorequest commented Jun 2, 2020

Vadorequest commented Jun 3, 2020

Vadorequest commented Jun 3, 2020

Vadorequest commented Jun 3, 2020 • edited

Vadorequest commented Jun 3, 2020

Vadorequest commented Jun 3, 2020

Vadorequest commented Jun 3, 2020

github-actions bot commented Jun 24, 2021

github-actions bot commented Jun 24, 2021

github-actions bot commented Jun 25, 2021

github-actions bot commented Jun 25, 2021

github-actions bot commented Jan 23, 2023

github-actions bot commented Jan 23, 2023

github-actions bot commented Apr 11, 2023

V2 - New preset `v2-mst-aptd-gcms-lcz-sty` with hybrid SSG/SSR instead of SSR-only (based on `v1-ssr-mst-aptd-gcms-lcz-sty`) #68

V2 - New preset `v2-mst-aptd-gcms-lcz-sty` with hybrid SSG/SSR instead of SSR-only (based on `v1-ssr-mst-aptd-gcms-lcz-sty`) #68

Vadorequest commented May 30, 2020 •

edited

Vadorequest commented Jun 3, 2020 •

edited