fix: improve loading performance of individual highlight

pages/feed/[id].tsx

@@ -1,7 +1,6 @@
 import { GetServerSidePropsContext } from "next";
 
-import fetchSocialCard from "lib/utils/fetch-social-card";
-import Feed from "../feed";
+import Feed from "./index";
 
 export default Feed;
 
@@ -13,27 +12,24 @@ export type HighlightSSRPropsContext = GetServerSidePropsContext<{ id: string }>
 
 export async function handleHighlightSSR({ params }: GetServerSidePropsContext<{ id: string }>) {
   const { id } = params!;
-  let highlight: DbHighlight | null = null;
-  let ogImage;
 
-  async function fetchUserData() {
+  async function fetchHighlight() {
     const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/highlights/${id}`, {
       headers: {
         accept: "application/json",
       },
     });
 
     if (req.ok) {
-      highlight = (await req.json()) as DbHighlight;
+      return (await req.json()) as DbHighlight;
     }
-  }
 
-  // Runs the data fetching in parallel. Decreases the loading time by 50%.
-  const [, ogData] = await Promise.allSettled([fetchUserData(), fetchSocialCard(`highlights/${id}`)]);
+    return null;
+  }
 
-  ogImage = ogData.status === "fulfilled" ? ogData.value : "";
+  const highlight = await fetchHighlight();
 
   return {
-    props: { highlight, ogImage },
+    props: { highlight },
   };
 }

pages/feed/index.tsx

@@ -35,7 +35,6 @@ type highlightReposType = { repoName: string; repoIcon: string; full_name: strin
 
 interface HighlightSSRProps {
   highlight: DbHighlight | null;
-  ogImage?: string;
 }
 
 const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
@@ -44,16 +43,26 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
 
   const { data: featuredHighlights } = useFetchFeaturedHighlights();
 
+  const repoTofilterList = (repos: { full_name: string }[]): highlightReposType[] => {
+    const filtersArray = repos.map(({ full_name }) => {
+      const [orgName, repo] = full_name.split("/");
+      return { repoName: repo, repoIcon: `https://www.github.com/${orgName}.png?size=300`, full_name };
+    });
+
+    return filtersArray;
+  };
+
   const router = useRouter();
-  const [hydrated, setHydrated] = useState(false);
   const [openSingleHighlight, setOpenSingleHighlight] = useState(false);
   const [selectedRepo, setSelectedRepo] = useState("");
   const [activeTab, setActiveTab] = useState<activeTabType>("home");
-  const [repoList, setRepoList] = useState<highlightReposType[]>(repos as highlightReposType[]);
+  const [repoList, setRepoList] = useState<highlightReposType[]>(repoTofilterList(repos as highlightReposType[]));
+  const [hydrated, setHydrated] = useState(false);
 
-  const { id } = router.query;
   const singleHighlight = props.highlight;
-  const highlightId = props.highlight?.id as string;
+  const ogImage = props?.highlight
+    ? `${process.env.NEXT_PUBLIC_OPENGRAPH_URL}/highlights/${props.highlight.id}`
+    : undefined;
 
   const { data: followersRepo } = useFetchFollowersHighlightRepos();
 
@@ -69,15 +78,6 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
     { name: "Highlights", count: highlights_count ?? 0 },
   ];
 
-  const repoTofilterList = (repos: { full_name: string }[]): highlightReposType[] => {
-    const filtersArray = repos.map(({ full_name }) => {
-      const [orgName, repo] = full_name.split("/");
-      return { repoName: repo, repoIcon: `https://www.github.com/${orgName}.png?size=300`, full_name };
-    });
-
-    return filtersArray;
-  };
-
   useEffect(() => {
     setSelectedRepo("");
     if (activeTab === "home") {
@@ -88,20 +88,21 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
   }, [activeTab, followersRepo, repos]);
 
   useEffect(() => {
+    console.log("id", props.highlight?.id);
     if (selectedRepo) {
       router.push(`/feed?repo=${selectedRepo}`);
       setPage(1);
     }
-    if (id) {
+    if (props.highlight?.id) {
       setOpenSingleHighlight(true);
-      router.push(`/feed/${id}`);
+      router.push(`/feed/${props.highlight?.id}`);
     }
 
-    if (!selectedRepo && !id) {
+    if (!selectedRepo && !props.highlight?.id) {
       router.push("/feed");
       setPage(1);
     }
-  }, [selectedRepo, id]);
+  }, [selectedRepo, props.highlight?.id]);
 
   useEffect(() => {
     setHydrated(true);
@@ -113,7 +114,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
         <SEO
           title={`${props?.highlight ? "Highlight | OpenSauced" : "Highlights | OpenSauced"}`}
           description={`${props?.highlight?.highlight || "OpenSauced Highlight"}`}
-          image={props?.ogImage}
+          image={ogImage}
           twitterCard="summary_large_image"
         />
       </>
@@ -124,7 +125,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
       <SEO
         title={`${props?.highlight ? "Highlight | OpenSauced" : "Highlights | OpenSauced"}`}
         description={`${props?.highlight?.highlight || "OpenSauced Highlight"}`}
-        image={props?.ogImage}
+        image={ogImage}
         twitterCard="summary_large_image"
       />
       <div className="container flex flex-col gap-16 px-2 pt-12 mx-auto md:px-16 lg:justify-end md:flex-row">