AV-1153: Fix prefetching and hydration #570

jakecoble · 2024-08-16T13:08:20Z

Jira story: https://audioverse7.atlassian.net/jira/software/projects/AV/boards/3?assignee=712020:e12535da-4ed4-4700-9b40-8821b41cbf9e&selectedIssue=AV-1153

vercel · 2024-08-16T13:08:24Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
audioverse-next	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 27, 2024 3:57pm

github-actions · 2024-08-16T13:08:36Z

Localization Summary

language	unchanged	untranslated
br	874	74
de	874	407
en	874	0
es	874	398
fr	874	415
ja	874	378
ru	874	388
zh	874	377

View full summary

github-actions · 2024-08-16T13:10:50Z

📦 Next.js Bundle Analysis for audioverse-next

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
`global`	`243.69 KB` (-21 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Nineteen Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`225 KB`)
`/[language]/account`	`21.4 KB`	265.09 KB	117.82% (🟢 -0.05%)
`/[language]/account/login`	`17.21 KB`	260.9 KB	115.96% (🟢 -0.06%)
`/[language]/account/register`	`18.01 KB`	261.7 KB	116.31% (🟢 -0.04%)
`/[language]/bibles/[id]/[book]/[chapter]`	`14.95 KB`	258.64 KB	114.95% (🟢 -0.02%)
`/[language]/bibles/chapters/[id]/[[...slugs]]`	`19.87 KB`	263.55 KB	117.14% (🟢 -0.03%)
`/[language]/books/tracks/[id]/[[...slugs]]`	`20.66 KB`	264.35 KB	117.49% (🟢 -0.03%)
`/[language]/discover`	`8.94 KB`	252.63 KB	112.28% (🟢 -0.05%)
`/[language]/embed/media/[id]`	`12.76 KB`	256.45 KB	113.98% (🟢 -0.03%)
`/[language]/library`	`22.2 KB`	265.89 KB	118.17% (🟢 -0.05%)
`/[language]/library/history`	`23.26 KB`	266.95 KB	118.64% (🟢 -0.04%)
`/[language]/library/playlists`	`23.29 KB`	266.97 KB	118.66% (🟢 -0.05%)
`/[language]/library/playlists/[playlist]`	`5.56 KB`	249.25 KB	110.78% (🟢 -0.01%)
`/[language]/library/playlists/[playlist]/items/[id]/[[...slugs]]`	`20.88 KB`	264.57 KB	117.58% (🟢 -0.02%)
`/[language]/playlists/[playlist]/items/[id]/[[...slugs]]`	`20.87 KB`	264.56 KB	117.58% (🟢 -0.02%)
`/[language]/songs/[id]/[[...slugs]]`	`20.65 KB`	264.34 KB	117.49% (🟢 -0.03%)
`/[language]/songs/book/[book]/[id]/[[...slugs]]`	`20.81 KB`	264.5 KB	117.56% (🟢 -0.03%)
`/[language]/sponsors/all`	`2.38 KB`	246.07 KB	109.36% (🟡 +0.03%)
`/[language]/stories/[id]/[[...slugs]]`	`20.66 KB`	264.35 KB	117.49% (🟢 -0.03%)
`/[language]/teachings/[id]/[[...slug]]`	`20.66 KB`	264.35 KB	117.49% (🟢 -0.03%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 5% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

github-actions · 2024-08-16T19:53:41Z

Lighthouse Results

github-actions · 2024-08-16T19:57:36Z

Accessibility Issues

Code	New	Fixed	Retained	Ignored	Total
WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail	0	0	0	2572	2572

View full summary

narthur

Great work!

src/lib/hooks/useIsAuthenticated.ts

jakecoble · 2024-08-21T13:34:32Z

Steps used to identify missing prefetches:

Open site in a new window
Block https://graphql.audioverse.org/graphql
Scroll through each page, comparing two versions of the site: one with the graphql endpoint blocked and one with the endpoint unblocked.
Note any sections that are missing when the endpoint is blocked.
Ensure those sections are fetched in prefetchQueries in that page's getServerSideProps and getStaticProps functions.

Steps used to find fetches that weren't using the generated queries:

Grep codebase for @tanstack/react-query imports.
Modify files using react-query directly to use the generated query code.

narthur · 2024-08-30T13:30:47Z

Great work, @jakecoble!

narthur

Great work!

alangumer

Great work!

Squashed commit of the following: commit b16dbb1 Merge: 3e7de6a 50a949b Author: Nathan Arthur <[email protected]> Date: Fri Sep 27 12:12:52 2024 -0400 Merge pull request #570 from audioverse-org/prefetching-and-hydration-fixes AV-1153: Fix prefetching and hydration commit 50a949b Author: Jake Coble <[email protected]> Date: Fri Sep 27 11:51:16 2024 -0400 Update vulnerable dependency commit c597584 Author: Henry Orozco <[email protected]> Date: Fri Sep 27 09:47:00 2024 -0600 refactor: use codegen hook for useGetLibraryPlaylistPageDataQuery commit 921fa3c Author: Jake Coble <[email protected]> Date: Fri Sep 27 10:55:12 2024 -0400 Fix generated query keys in doPrefetch commit fb00185 Author: Jake Coble <[email protected]> Date: Sun Sep 22 11:26:32 2024 -0400 Whitelist CVE commit e553d40 Author: Jake Coble <[email protected]> Date: Thu Sep 5 16:00:25 2024 -0400 Add getIsAuthenticated to user session query keys commit def7712 Author: Jake Coble <[email protected]> Date: Mon Sep 2 10:02:15 2024 -0400 Replace useGetIsAuthenticatedQuery with useIsAuthenticated commit f4b7fa7 Author: Jake Coble <[email protected]> Date: Thu Aug 22 14:57:14 2024 -0400 Rename withAuthGuard query to getIsAuthenticated in hooks directory commit 8e6bbff Author: Jake Coble <[email protected]> Date: Sun Aug 18 14:46:53 2024 -0400 Use generated infinite query function on sponsor page commit 5fe0648 Author: Jake Coble <[email protected]> Date: Fri Aug 16 15:40:50 2024 -0400 Prefetch audiobook slider data

jakecoble assigned jakecoble and narthur Aug 16, 2024

narthur changed the title ~~Fix prefetching and hydration~~ AV-1153: Fix prefetching and hydration Aug 16, 2024

vercel bot deployed to Preview August 16, 2024 19:45 View deployment

vercel bot deployed to Preview August 18, 2024 18:53 View deployment

narthur requested changes Aug 21, 2024

View reviewed changes

src/lib/hooks/useIsAuthenticated.ts Outdated Show resolved Hide resolved

vercel bot deployed to Preview August 22, 2024 19:03 View deployment

vercel bot deployed to Preview August 27, 2024 18:05 View deployment

vercel bot deployed to Preview August 28, 2024 14:58 View deployment

jakecoble force-pushed the prefetching-and-hydration-fixes branch from da18512 to 9d60cc2 Compare August 29, 2024 20:13

vercel bot deployed to Preview August 29, 2024 20:18 View deployment

jakecoble force-pushed the prefetching-and-hydration-fixes branch from 9d60cc2 to 67df8ed Compare August 30, 2024 13:29

narthur marked this pull request as ready for review August 30, 2024 13:30

narthur requested a review from alangumer as a code owner August 30, 2024 13:30

vercel bot deployed to Preview August 30, 2024 13:38 View deployment

jakecoble force-pushed the prefetching-and-hydration-fixes branch from 67df8ed to abbf712 Compare September 2, 2024 13:47

vercel bot deployed to Preview September 2, 2024 13:54 View deployment

vercel bot deployed to Preview September 4, 2024 15:06 View deployment

jakecoble force-pushed the prefetching-and-hydration-fixes branch from 96562fe to 218273e Compare September 5, 2024 14:47

vercel bot had a problem deploying to Preview September 5, 2024 14:48 Failure

vercel bot deployed to Preview September 5, 2024 20:06 View deployment

jakecoble force-pushed the prefetching-and-hydration-fixes branch from 9253eb7 to fca4970 Compare September 13, 2024 16:28

vercel bot had a problem deploying to Preview September 13, 2024 16:29 Failure

jakecoble force-pushed the prefetching-and-hydration-fixes branch 2 times, most recently from 3ce2630 to e30dedf Compare September 17, 2024 14:10

vercel bot deployed to Preview September 17, 2024 14:19 View deployment

jakecoble added 5 commits September 19, 2024 15:07

Prefetch audiobook slider data

5fe0648

Use generated infinite query function on sponsor page

8e6bbff

Rename withAuthGuard query to getIsAuthenticated in hooks directory

f4b7fa7

Replace useGetIsAuthenticatedQuery with useIsAuthenticated

def7712

Add getIsAuthenticated to user session query keys

e553d40

jakecoble force-pushed the prefetching-and-hydration-fixes branch from e30dedf to e553d40 Compare September 19, 2024 19:07

narthur approved these changes Sep 19, 2024

View reviewed changes

vercel bot deployed to Preview September 19, 2024 19:11 View deployment

Whitelist CVE

fb00185

vercel bot deployed to Preview September 22, 2024 15:31 View deployment

Fix generated query keys in doPrefetch

921fa3c

vercel bot deployed to Preview September 27, 2024 15:00 View deployment

refactor: use codegen hook for useGetLibraryPlaylistPageDataQuery

c597584

alangumer approved these changes Sep 27, 2024

View reviewed changes

vercel bot deployed to Preview September 27, 2024 15:52 View deployment

Update vulnerable dependency

50a949b

vercel bot deployed to Preview September 27, 2024 15:57 View deployment

narthur merged commit b16dbb1 into master Sep 27, 2024
12 checks passed

narthur deleted the prefetching-and-hydration-fixes branch September 27, 2024 16:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AV-1153: Fix prefetching and hydration #570

AV-1153: Fix prefetching and hydration #570

jakecoble commented Aug 16, 2024 •

edited by narthur

Loading

vercel bot commented Aug 16, 2024 •

edited

Loading

github-actions bot commented Aug 16, 2024 •

edited

Loading

github-actions bot commented Aug 16, 2024 •

edited

Loading

github-actions bot commented Aug 16, 2024 •

edited

Loading

github-actions bot commented Aug 16, 2024 •

edited

Loading

narthur left a comment

jakecoble commented Aug 21, 2024 •

edited

Loading

narthur commented Aug 30, 2024

narthur left a comment

alangumer left a comment

AV-1153: Fix prefetching and hydration #570

AV-1153: Fix prefetching and hydration #570

Conversation

jakecoble commented Aug 16, 2024 • edited by narthur Loading

vercel bot commented Aug 16, 2024 • edited Loading

github-actions bot commented Aug 16, 2024 • edited Loading

Localization Summary

github-actions bot commented Aug 16, 2024 • edited Loading

📦 Next.js Bundle Analysis for audioverse-next

🎉 Global Bundle Size Decreased

Nineteen Pages Changed Size

github-actions bot commented Aug 16, 2024 • edited Loading

Lighthouse Results

github-actions bot commented Aug 16, 2024 • edited Loading

Accessibility Issues

narthur left a comment

Choose a reason for hiding this comment

jakecoble commented Aug 21, 2024 • edited Loading

narthur commented Aug 30, 2024

narthur left a comment

Choose a reason for hiding this comment

alangumer left a comment

Choose a reason for hiding this comment

jakecoble commented Aug 16, 2024 •

edited by narthur

Loading

vercel bot commented Aug 16, 2024 •

edited

Loading

github-actions bot commented Aug 16, 2024 •

edited

Loading

github-actions bot commented Aug 16, 2024 •

edited

Loading

github-actions bot commented Aug 16, 2024 •

edited

Loading

github-actions bot commented Aug 16, 2024 •

edited

Loading

jakecoble commented Aug 21, 2024 •

edited

Loading