Feat/ssr (#14)

* Refactor page/number to use ssr instead of useSWR

* Refactor story/id to use serverSide fetching'

* Remove fetcher.js and swr dependency

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": {

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;

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;