diff --git a/package.json b/package.json
index fb763aa..620103f 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "next-themes": "^0.0.15",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "swr": "^1.1.0",
     "zustand": "^3.6.8"
   },
   "devDependencies": {
diff --git a/src/helpers/fetcher.ts b/src/helpers/fetcher.ts
deleted file mode 100644
index ff540ec..0000000
--- a/src/helpers/fetcher.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// A simple fetch that'll be used in swr for data fetching
-
-export default async function fetcher<JSON = any>(
-  input: RequestInfo,
-  init?: RequestInit
-): Promise<JSON> {
-  const res = await fetch(input);
-
-  if (!res.ok) {
-    const error = new Error("An error occurred while fetching the data.");
-    throw error;
-  }
-
-  return res.json();
-}
diff --git a/src/pages/page/[number].tsx b/src/pages/page/[number].tsx
index 31e7406..652504e 100644
--- a/src/pages/page/[number].tsx
+++ b/src/pages/page/[number].tsx
@@ -1,4 +1,4 @@
-import { NextPage } from "next";
+import { GetServerSideProps, NextPage } from "next";
 import { TBaseStory } from "types/story";
 import { styled } from "../../../stitches.config";
 import StoryListItem from "@components/StoryListItem";
@@ -7,12 +7,11 @@ import { Fragment } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { PageNumber } from "@components/Common/PageNumber";
-import useSWR from "swr";
-import fetcher from "helpers/fetcher";
 import { CenteredText } from "styles/";
 
 type PageProps = {
-  response: TBaseStory[];
+  data: TBaseStory[];
+  errorCode: false | number;
 };
 
 const Box = styled("div", {
@@ -43,17 +42,10 @@ const PaginationContainer = styled("div", {
 const PageList: NextPage<PageProps> = (props: PageProps) => {
   const router = useRouter();
   const { number } = router.query;
+  const { data, errorCode } = props;
 
-  const NEWS_BASE_URL = "https://api.hnpwa.com/v0/news";
-  // Due to the redirect being made from / to /page/1 , the number sometimes is undefined when it reaches the fetch
-  // Setting it to 1, avoids the undefined api call
-  const fetchUrl = number
-    ? `${NEWS_BASE_URL}/${number}.json`
-    : `${NEWS_BASE_URL}/1.json`;
-
-  const { data, error } = useSWR<TBaseStory[], Error>(fetchUrl, fetcher);
-
-  if (error) return <CenteredText>Oops! Something went wrong :(</CenteredText>;
+  if (errorCode)
+    return <CenteredText>Oops! Something went wrong :(</CenteredText>;
 
   if (!data) return <CenteredText>Loading...</CenteredText>;
 
@@ -81,4 +73,27 @@ const PageList: NextPage<PageProps> = (props: PageProps) => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { number } = context.query;
+
+  const NEWS_BASE_URL = "https://api.hnpwa.com/v0/news";
+  // Due to the redirect being made from / to /page/1 , the number sometimes is undefined when it reaches the fetch
+  // Setting it to 1, avoids the undefined api call
+  const fetchUrl = number
+    ? `${NEWS_BASE_URL}/${number}.json`
+    : `${NEWS_BASE_URL}/1.json`;
+
+  const response = await fetch(fetchUrl);
+  const errorCode = response.ok ? false : response.status;
+  // Only run the json if the error is not present
+  const data = errorCode === false ? await response.json() : [];
+
+  return {
+    props: {
+      errorCode,
+      data,
+    },
+  };
+};
+
 export default PageList;
diff --git a/src/pages/stories/[id].tsx b/src/pages/stories/[id].tsx
index 33ca1a4..5a693a8 100644
--- a/src/pages/stories/[id].tsx
+++ b/src/pages/stories/[id].tsx
@@ -1,4 +1,4 @@
-import { NextPage } from "next";
+import { GetServerSideProps, NextPage } from "next";
 import { CenteredText, FlexColumn } from "../../styles";
 
 import { useRouter } from "next/router";
@@ -10,14 +10,17 @@ import Meta from "@components/Common/Meta";
 import CommentList from "@components/Comments/CommentList";
 import { Button } from "@components/Common/Button";
 import BackIcon from "svgs/back.svg";
-import useSWR from "swr";
-import fetcher from "helpers/fetcher";
 import { useTheme } from "next-themes";
 import InnerHTMLText from "@components/Common/InnerHTMLText";
 import { Size } from "types/size";
 import useWindowSize from "hooks/useWindowSize";
 import useStore from "store/useStore";
 
+type Props = {
+  data: TDetailedStory;
+  errorCode: false | number;
+};
+
 const Title = styled("h2", {
   fontSize: "$4",
   color: "$primaryText",
@@ -34,9 +37,9 @@ const Text = styled("span", {
   marginLeft: "4px",
 });
 
-const Story: NextPage = () => {
+const Story: NextPage<Props> = (props: Props) => {
   const router = useRouter();
-  const { id: storyId } = router.query;
+  const { data, errorCode } = props;
 
   const size: Size = useWindowSize();
 
@@ -46,14 +49,8 @@ const Story: NextPage = () => {
   const { theme } = useTheme();
   const stroke = theme === "light" ? "#161618" : "#FFFFFF";
 
-  const ITEM_BASE_URL = "https://api.hnpwa.com/v0/item";
-
-  const { data, error } = useSWR<TDetailedStory, Error>(
-    `${ITEM_BASE_URL}/${storyId}.json`,
-    fetcher
-  );
-
-  if (error) return <CenteredText>Oops! Something went wrong :(</CenteredText>;
+  if (errorCode)
+    return <CenteredText>Oops! Something went wrong :(</CenteredText>;
 
   if (!data) return <CenteredText>Loading...</CenteredText>;
 
@@ -129,4 +126,24 @@ const Story: NextPage = () => {
   );
 };
 
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { id } = context.query;
+
+  const ITEM_BASE_URL = "https://api.hnpwa.com/v0/item";
+
+  const fetchUrl = `${ITEM_BASE_URL}/${id}.json`;
+
+  const response = await fetch(fetchUrl);
+  const errorCode = response.ok ? false : response.status;
+  // Only run the json if the error is not present
+  const data = errorCode === false ? await response.json() : [];
+
+  return {
+    props: {
+      errorCode,
+      data,
+    },
+  };
+};
+
 export default Story;