⚡️ perf(kdrama, anime): cache video links, replace next/image

5 files changed, 14 insertions, 18 deletions

diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index f8cbe0c..0e62310 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -2,13 +2,15 @@ import { Chip, Image } from "@nextui-org/react";
 

 import { anime_info } from "../data-fetch/request";

 import DescriptionTabs from "../components/infoTabs";

-

 import EpisodesContainer from "../components/vidButtonContainer";

+import { preFetchVideoLinks } from "../components/cacher";

 

 const AnimeInfoHomepage = async ({ params }) => {

 	const id = params.id;

 	const data = await anime_info(id);

 

+	preFetchVideoLinks(data.episodes);

+

 	return (

 		<section className="pt-12  lg:w-9/12 m-auto">

 			<div className="flex items-center justify-center lg:justify-start md:justify-start">

diff --git a/src/app/anime/components/cacher.js b/src/app/anime/components/cacher.js
index 164dafd..ae9b10b 100644
--- a/src/app/anime/components/cacher.js
+++ b/src/app/anime/components/cacher.js
@@ -1,6 +1,6 @@
 "use server";
 
-import { anime_info } from "../data-fetch/request";
+import { anime_info, video_url } from "../data-fetch/request";
 
 export async function preFetchAnimeInfo(data) {
 	try {
@@ -18,7 +18,7 @@ export async function preFetchAnimeInfo(data) {
 export async function preFetchVideoLinks(data) {
 	try {
 		const fetchPromises = data.map(async (element) => {
-			await fetch(watch_url(element.id), { next: { revalidate: 21600 } });
+			await video_url(element.id);
 		});
 
 		await Promise.all(fetchPromises);
diff --git a/src/app/anime/components/search_results.jsx b/src/app/anime/components/search_results.jsx
index 3097a96..2018680 100644
--- a/src/app/anime/components/search_results.jsx
+++ b/src/app/anime/components/search_results.jsx
@@ -2,8 +2,8 @@ import { search_results } from "../data-fetch/request";
 import { preFetchAnimeInfo } from "./cacher";
 import styles from "../../page.module.css";
 
-import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";
-import NextImage from "next/image";
+import { Card, CardHeader, CardBody, Link } from "@nextui-org/react";
+import Image from "next/image";
 
 const SearchResults = async (title) => {
 	const data = await search_results(title);
@@ -25,14 +25,11 @@ const SearchResults = async (title) => {
 						<Card className="overflow-hidden" isPressable>
 							<CardBody>
 								<Image
-									as={NextImage}
-									isBlurred
-									alt="Anime Poster"
+									alt="Searched Anime Poster"
 									src={item.image}
 									width={190}
 									height={120}
-									shadow="lg"
-									className="h-64"
+									className="rounded-md h-64"
 									priority
 								/>
 							</CardBody>
diff --git a/src/app/anime/data-fetch/request.js b/src/app/anime/data-fetch/request.js
index 3d22b7a..579f693 100644
--- a/src/app/anime/data-fetch/request.js
+++ b/src/app/anime/data-fetch/request.js
@@ -47,7 +47,7 @@ export const anime_info = async (id) => {
 
 export const video_url = async (episodeId) => {
 	const res = await fetch(watch_url(episodeId), {
-		next: { revalidate: 21600 },
+		cache: "force-cache",
 	});
 	const data = await res.json();
 	return data;
diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx
index a2d5777..ce5ca34 100644
--- a/src/app/anime/page.jsx
+++ b/src/app/anime/page.jsx
@@ -1,5 +1,5 @@
-import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";

-import NextImage from "next/image";

+import { Card, CardHeader, CardBody, Link } from "@nextui-org/react";

+import Image from "next/image";

 import styles from "../page.module.css";

 

 import { top_airing, recent, popular } from "./data-fetch/request";

@@ -38,14 +38,11 @@ const AnimeHomepage = async () => {
 						<Card className="overflow-visible " isPressable>

 							<CardBody>

 								<Image

-									as={NextImage}

-									isBlurred

 									alt="Anime Poster"

-									src={item.image}

+									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

 									width={270}

 									height={160}

-									className="h-60 overflow-hidden"

-									shadow="lg"

+									className="h-60 rounded-md overflow-hidden"

 									priority

 								/>

 							</CardBody>