Skip to content

Commit f77c88b

Browse files
SimekSimek
authored
Home page tweaks, add caching (#2116)
1 parent 57e767d commit f77c88b

9 files changed

Lines changed: 53 additions & 43 deletions

File tree

‎pages/index.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { type NextPageContext } from 'next';
22

33
import HomeScene from '~/scenes/HomeScene';
44
import { type HomePageProps } from '~/types/pages';
5+
import { NEXT_1H_CACHE_HEADER } from '~/util/Constants';
56
import getApiUrl from '~/util/getApiUrl';
67
import urlWithQuery from '~/util/urlWithQuery';
78

@@ -12,7 +13,6 @@ function Index(props: HomePageProps) {
1213
const LIMIT = 8;
1314

1415
Index.getInitialProps = async (ctx: NextPageContext) => {
15-
console.warn(ctx.query);
1616
if (ctx.res && ctx.query && Object.keys(ctx.query).length > 0) {
1717
ctx.res.writeHead(302, {
1818
Location: urlWithQuery('/packages', ctx.query),
@@ -29,13 +29,16 @@ Index.getInitialProps = async (ctx: NextPageContext) => {
2929
hasNativeCode: 'true',
3030
}),
3131
ctx
32-
)
32+
),
33+
NEXT_1H_CACHE_HEADER
3334
);
3435
const recentlyAddedResponse = await fetch(
35-
getApiUrl(urlWithQuery('/libraries', { order: 'added', limit: LIMIT.toString() }), ctx)
36+
getApiUrl(urlWithQuery('/libraries', { order: 'added', limit: LIMIT.toString() }), ctx),
37+
NEXT_1H_CACHE_HEADER
3638
);
3739
const recentlyUpdatedResponse = await fetch(
38-
getApiUrl(urlWithQuery('/libraries', { order: 'updated', limit: LIMIT.toString() }), ctx)
40+
getApiUrl(urlWithQuery('/libraries', { order: 'updated', limit: LIMIT.toString() }), ctx),
41+
NEXT_1H_CACHE_HEADER
3942
);
4043
const popularResponse = await fetch(
4144
getApiUrl(
@@ -47,10 +50,14 @@ Index.getInitialProps = async (ctx: NextPageContext) => {
4750
wasRecentlyUpdated: 'true',
4851
}),
4952
ctx
50-
)
53+
),
54+
NEXT_1H_CACHE_HEADER
5155
);
5256

53-
const statisticResponse = await fetch(getApiUrl(urlWithQuery('/libraries/statistic', {}), ctx));
57+
const statisticResponse = await fetch(
58+
getApiUrl(urlWithQuery('/libraries/statistic', {}), ctx),
59+
NEXT_1H_CACHE_HEADER
60+
);
5461

5562
return {
5663
mostDownloaded: await mostDownloadedResponse.json(),

‎pages/package/[name]/[scopedName]/index.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type NextPageContext } from 'next';
33
import ErrorScene from '~/scenes/ErrorScene';
44
import PackageOverviewScene from '~/scenes/PackageOverviewScene';
55
import { type PackageOverviewPageProps } from '~/types/pages';
6-
import { EMPTY_PACKAGE_DATA } from '~/util/Constants';
6+
import { EMPTY_PACKAGE_DATA, NEXT_10M_CACHE_HEADER, NEXT_1H_CACHE_HEADER } from '~/util/Constants';
77
import getApiUrl from '~/util/getApiUrl';
88
import { getPackagePageErrorProps } from '~/util/getPackagePageErrorProps';
99
import { parseQueryParams } from '~/util/parseQueryParams';
@@ -34,12 +34,11 @@ export async function getServerSideProps(ctx: NextPageContext) {
3434

3535
try {
3636
const [apiResponse, npmResponse] = await Promise.all([
37-
fetch(getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx), {
38-
next: { revalidate: 60 * 60 },
39-
}),
40-
fetch(`https://registry.npmjs.org/${packageName}/latest`, {
41-
next: { revalidate: 60 * 10 },
42-
}),
37+
fetch(
38+
getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx),
39+
NEXT_1H_CACHE_HEADER
40+
),
41+
fetch(`https://registry.npmjs.org/${packageName}/latest`, NEXT_10M_CACHE_HEADER),
4342
]);
4443

4544
if (apiResponse.status !== 200 || (npmResponse.status !== 200 && npmResponse.status !== 404)) {

‎pages/package/[name]/[scopedName]/score.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type NextPageContext } from 'next';
33
import ErrorScene from '~/scenes/ErrorScene';
44
import PackageScoreScene from '~/scenes/PackageScoreScene';
55
import { type PackageScorePageProps } from '~/types/pages';
6-
import { EMPTY_PACKAGE_DATA } from '~/util/Constants';
6+
import { EMPTY_PACKAGE_DATA, NEXT_1H_CACHE_HEADER } from '~/util/Constants';
77
import getApiUrl from '~/util/getApiUrl';
88
import { getPackagePageErrorProps } from '~/util/getPackagePageErrorProps';
99
import { parseQueryParams } from '~/util/parseQueryParams';
@@ -28,9 +28,7 @@ export async function getServerSideProps(ctx: NextPageContext) {
2828
try {
2929
const apiResponse = await fetch(
3030
getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx),
31-
{
32-
next: { revalidate: 60 * 60 },
33-
}
31+
NEXT_1H_CACHE_HEADER
3432
);
3533

3634
if (apiResponse.status !== 200) {

‎pages/package/[name]/[scopedName]/versions.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type NextPageContext } from 'next';
33
import ErrorScene from '~/scenes/ErrorScene';
44
import PackageVersionsScene from '~/scenes/PackageVersionsScene';
55
import { type PackageVersionsPageProps } from '~/types/pages';
6-
import { EMPTY_PACKAGE_DATA } from '~/util/Constants';
6+
import { EMPTY_PACKAGE_DATA, NEXT_10M_CACHE_HEADER, NEXT_1H_CACHE_HEADER } from '~/util/Constants';
77
import getApiUrl from '~/util/getApiUrl';
88
import { getPackagePageErrorProps } from '~/util/getPackagePageErrorProps';
99
import { parseQueryParams } from '~/util/parseQueryParams';
@@ -34,12 +34,11 @@ export async function getServerSideProps(ctx: NextPageContext) {
3434

3535
try {
3636
const [apiResponse, npmResponse] = await Promise.all([
37-
fetch(getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx), {
38-
next: { revalidate: 60 * 60 },
39-
}),
40-
fetch(`https://registry.npmjs.org/${packageName}`, {
41-
next: { revalidate: 60 * 10 },
42-
}),
37+
fetch(
38+
getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx),
39+
NEXT_1H_CACHE_HEADER
40+
),
41+
fetch(`https://registry.npmjs.org/${packageName}`, NEXT_10M_CACHE_HEADER),
4342
]);
4443

4544
if (apiResponse.status !== 200 || npmResponse.status !== 200) {

‎pages/package/[name]/index.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type NextPageContext } from 'next';
33
import ErrorScene from '~/scenes/ErrorScene';
44
import PackageOverviewScene from '~/scenes/PackageOverviewScene';
55
import { type PackageOverviewPageProps } from '~/types/pages';
6-
import { EMPTY_PACKAGE_DATA } from '~/util/Constants';
6+
import { EMPTY_PACKAGE_DATA, NEXT_10M_CACHE_HEADER, NEXT_1H_CACHE_HEADER } from '~/util/Constants';
77
import getApiUrl from '~/util/getApiUrl';
88
import { getPackagePageErrorProps } from '~/util/getPackagePageErrorProps';
99
import { parseQueryParams } from '~/util/parseQueryParams';
@@ -34,12 +34,11 @@ export async function getServerSideProps(ctx: NextPageContext) {
3434

3535
try {
3636
const [apiResponse, npmResponse] = await Promise.all([
37-
fetch(getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx), {
38-
next: { revalidate: 60 * 60 },
39-
}),
40-
fetch(`https://registry.npmjs.org/${packageName}/latest`, {
41-
next: { revalidate: 60 * 10 },
42-
}),
37+
fetch(
38+
getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx),
39+
NEXT_1H_CACHE_HEADER
40+
),
41+
fetch(`https://registry.npmjs.org/${packageName}/latest`, NEXT_10M_CACHE_HEADER),
4342
]);
4443

4544
if (apiResponse.status !== 200 || (npmResponse.status !== 200 && npmResponse.status !== 404)) {

‎pages/package/[name]/score.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type NextPageContext } from 'next';
33
import ErrorScene from '~/scenes/ErrorScene';
44
import PackageScoreScene from '~/scenes/PackageScoreScene';
55
import { type PackageScorePageProps } from '~/types/pages';
6-
import { EMPTY_PACKAGE_DATA } from '~/util/Constants';
6+
import { EMPTY_PACKAGE_DATA, NEXT_1H_CACHE_HEADER } from '~/util/Constants';
77
import getApiUrl from '~/util/getApiUrl';
88
import { getPackagePageErrorProps } from '~/util/getPackagePageErrorProps';
99
import { parseQueryParams } from '~/util/parseQueryParams';
@@ -28,9 +28,7 @@ export async function getServerSideProps(ctx: NextPageContext) {
2828
try {
2929
const apiResponse = await fetch(
3030
getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx),
31-
{
32-
next: { revalidate: 60 * 60 },
33-
}
31+
NEXT_1H_CACHE_HEADER
3432
);
3533

3634
if (apiResponse.status !== 200) {

‎pages/package/[name]/versions.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type NextPageContext } from 'next';
33
import ErrorScene from '~/scenes/ErrorScene';
44
import PackageVersionsScene from '~/scenes/PackageVersionsScene';
55
import { type PackageVersionsPageProps } from '~/types/pages';
6-
import { EMPTY_PACKAGE_DATA } from '~/util/Constants';
6+
import { EMPTY_PACKAGE_DATA, NEXT_10M_CACHE_HEADER, NEXT_1H_CACHE_HEADER } from '~/util/Constants';
77
import getApiUrl from '~/util/getApiUrl';
88
import { getPackagePageErrorProps } from '~/util/getPackagePageErrorProps';
99
import { parseQueryParams } from '~/util/parseQueryParams';
@@ -34,12 +34,11 @@ export async function getServerSideProps(ctx: NextPageContext) {
3434

3535
try {
3636
const [apiResponse, npmResponse] = await Promise.all([
37-
fetch(getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx), {
38-
next: { revalidate: 60 * 60 },
39-
}),
40-
fetch(`https://registry.npmjs.org/${packageName}`, {
41-
next: { revalidate: 60 * 10 },
42-
}),
37+
fetch(
38+
getApiUrl(urlWithQuery(`/libraries`, { search: packageName }), ctx),
39+
NEXT_1H_CACHE_HEADER
40+
),
41+
fetch(`https://registry.npmjs.org/${packageName}`, NEXT_10M_CACHE_HEADER),
4342
]);
4443

4544
if (apiResponse.status !== 200 || npmResponse.status !== 200) {

‎scenes/HomeScene.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ export default function HomeScene({
9191
</A>
9292
<A href={urlWithQuery('/packages', { search: 'gesture' })}>Gestures</A>
9393
<A href={urlWithQuery('/packages', { search: 'health' })}>Health</A>
94+
<A href={urlWithQuery('/packages', { search: 'i18n' })}>I18n</A>
9495
<A href={urlWithQuery('/packages', { search: 'icons' })}>Icons</A>
9596
<A href={urlWithQuery('/packages', { search: 'image' })}>Image</A>
9697
<A href={urlWithQuery('/packages', { search: 'location' })}>Location</A>
@@ -148,7 +149,7 @@ export default function HomeScene({
148149
data={mostDownloaded.libraries}
149150
title="Most downloaded"
150151
Icon={Download}
151-
queryParams={{ order: 'downloads' }}
152+
queryParams={{ order: 'downloads', hasNativeCode: 'true' }}
152153
/>
153154
<HomeSection
154155
data={popular.libraries}

‎util/Constants.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { TimeRange } from '~/util/datetime';
2+
13
export const NUM_PER_PAGE = 30;
24

35
export const EMPTY_PACKAGE_DATA = {
@@ -28,3 +30,11 @@ export const VALID_ENTRY_KEYS = new Set([
2830
'examples',
2931
'images',
3032
]);
33+
34+
export const NEXT_10M_CACHE_HEADER = {
35+
next: { revalidate: TimeRange.MINUTE * 10 },
36+
};
37+
38+
export const NEXT_1H_CACHE_HEADER = {
39+
next: { revalidate: TimeRange.HOUR },
40+
};

0 commit comments

Comments
 (0)