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`) by Vadorequest · Pull Request #68 · UnlyEd/next-right-now

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

…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

…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

… files + extended Jest with jest-to-match-shape-of + fix conflict between package.json:jest and jest.config.js - See jestjs/jest#10123 Fix jest config setupFilesAfterEnv (conflict between package.json:jest and jest.config.js) - See jestjs/jest#10123 Make jest load env variables from .env* files (in the correct order) Extend Jest with jest-to-match-shape-of Remove node-fetch polyfill for Jest and polyfill with "Next" instead - See vercel/next.js#13678 (comment)

github-actions · 2021-06-15T21:05:39Z

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

github-actions · 2021-06-15T21:09:43Z

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

… (Cherry-pick #374)

github-actions · 2021-06-23T14:43:16Z

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

github-actions · 2021-06-23T14:47:52Z

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

github-actions · 2021-06-23T15:06:32Z

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

github-actions · 2021-06-23T15:10:27Z

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

* Refactor Sentry, split code between files depending on usage (browser/server/universal) * Always flush Sentry in API endpoints * Always flush Sentry in _error handling

github-actions · 2021-06-24T11:47:43Z

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

github-actions · 2021-06-24T11:51:40Z

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

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

samuelcastro reviewed Jun 2, 2020

View reviewed changes

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

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

Comment thread src/utils/data/record.ts

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

Fix eslint errors

c414b40

Vadorequest added 2 commits June 19, 2021 15:23

Remove dead code (unnecessary anymore)

043db6f

Refactor Amplitude (browser) + add Amplitude to the server side (API)…

82aad2f

… (Cherry-pick #374)

Fix TS issues

6a27688

Refactor Sentry + fix Sentry usage in API endpoints (#375)

9b72578

* Refactor Sentry, split code between files depending on usage (browser/server/universal) * Always flush Sentry in API endpoints * Always flush Sentry in _error handling

Vadorequest added 2 commits June 24, 2021 17:48

Add flushSafe to avoid crashing API endpoint when flushing fails

83c0c5f

Use '@sentry/node' instead of Sentry init

a5ad627

Vadorequest added 3 commits June 24, 2021 18:36

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

ed3cfdf

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

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

9a4e137

Vadorequest and others added 4 commits June 25, 2021 10:21

Add missing await/flush in API endpoints

cdb9243

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

53e51a8

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

e4e2e7a

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

06a6a37

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

c5d5eb9

Uh oh!

Conversation

Vadorequest commented May 30, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

Vadorequest commented May 30, 2020

Uh oh!

Vadorequest commented May 30, 2020

Uh oh!

Vadorequest commented May 30, 2020

Uh oh!

Vadorequest commented May 30, 2020

Uh oh!

Vadorequest commented May 30, 2020

Uh oh!

Vadorequest commented May 30, 2020

Uh oh!

Vadorequest commented May 31, 2020

Uh oh!

Vadorequest commented Jun 1, 2020

Uh oh!

Vadorequest commented Jun 2, 2020

Uh oh!

Uh oh!

Vadorequest commented Jun 2, 2020

Uh oh!

Vadorequest commented Jun 3, 2020

Uh oh!

Uh oh!

Vadorequest commented Jun 3, 2020

Uh oh!

Vadorequest commented Jun 3, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Vadorequest commented Jun 3, 2020

Uh oh!

Vadorequest commented Jun 3, 2020

Uh oh!

Vadorequest commented Jun 3, 2020

Uh oh!

github-actions Bot commented Jun 15, 2021

Uh oh!

github-actions Bot commented Jun 15, 2021

Uh oh!

github-actions Bot commented Jun 23, 2021

Uh oh!

github-actions Bot commented Jun 23, 2021

Uh oh!

github-actions Bot commented Jun 23, 2021

Uh oh!

github-actions Bot commented Jun 23, 2021

Uh oh!

github-actions Bot commented Jun 24, 2021

Uh oh!

github-actions Bot commented Jun 24, 2021

Uh oh!

github-actions Bot commented Jun 24, 2021

Uh oh!

github-actions Bot commented Jun 24, 2021

Uh oh!

github-actions Bot commented Jun 25, 2021

Uh oh!

github-actions Bot commented Jun 25, 2021

Uh oh!

github-actions Bot commented Jan 23, 2023

Uh oh!

github-actions Bot commented Jan 23, 2023

Uh oh!

github-actions Bot commented Apr 11, 2023

Uh oh!

Vadorequest commented May 30, 2020 •

edited

Loading

Vadorequest commented Jun 3, 2020 •

edited

Loading