xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 09:11:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix router prefetch performance issue

Browse Source
This commit is contained in:
DefectingCat
2021-12-05 00:53:37 +08:00
parent 6a329d01b5
commit 15f5feee66
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/ArchiveCard.tsx
View File

@ -14,6 +14,7 @@ import { useRouter } from 'next/router';
import useGetColors from 'lib/hooks/useGetColors';
import useLazyLoad from 'lib/hooks/useLazyload';
import dynamic from 'next/dynamic';
import useIntersection from 'lib/hooks/useIntersection';
const Date = dynamic(() => import('./DateFormater'));
@ -26,6 +27,7 @@ const ArchiveCard: FC<Props> = ({ post }) => {
const router = useRouter();
const { initSrc, blur, targetRef } = useLazyLoad(post.index_img);
const { targetRef: cardRef, intersect } = useIntersection();
const { borderColor, headingColor } = useGetColors();
@ -36,9 +38,9 @@ const ArchiveCard: FC<Props> = ({ post }) => {
};
useEffect(() => {
router.prefetch(`/p/${post.url}`);
intersect && router.prefetch(`/p/${post.url}`);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [post.url]);
}, [post.url, intersect]);
return (
<>
@ -48,6 +50,7 @@ const ArchiveCard: FC<Props> = ({ post }) => {
key={post.url}
cursor="pointer"
justifyContent="space-between"
ref={cardRef}
>
<Box>
<LinkOverlay

7
components/PostCard.tsx
View File

@ -9,6 +9,7 @@ import { useRouter } from 'next/router';
import useGetColors from 'lib/hooks/useGetColors';
import useLazyLoad from 'lib/hooks/useLazyload';
import dynamic from 'next/dynamic';
import useIntersection from 'lib/hooks/useIntersection';
const Date = dynamic(() => import('./DateFormater'));
@ -21,6 +22,7 @@ const PostCard: FC<Props> = ({ post }) => {
const router = useRouter();
const { initSrc, targetRef } = useLazyLoad(post.index_img);
const { targetRef: cardRef, intersect } = useIntersection();
const { boxBg, textColor, headingColor } = useGetColors();
@ -31,9 +33,9 @@ const PostCard: FC<Props> = ({ post }) => {
};
useEffect(() => {
router.prefetch(`/p/${post.url}`);
intersect && router.prefetch(`/p/${post.url}`);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [post.url]);
}, [post.url, intersect]);
return (
<>
@ -44,6 +46,7 @@ const PostCard: FC<Props> = ({ post }) => {
overflow="hidden"
boxShadow="card"
mb="2.5rem"
ref={cardRef}
>
{post.index_img && (
<Link