add some ssr to page

Author: Matej Snuderl

package.json

@@ -28,7 +28,9 @@
     "storybook": "start-storybook"
   },
   "dependencies": {
-    "next": "^9.3.2",
+    "ky": "^0.19.0",
+    "ky-universal": "^0.5.0",
+    "next": "^9.3.3",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
@@ -41,10 +43,10 @@
     "@testing-library/react": "^10.0.1",
     "@testing-library/testcafe": "^4.0.0",
     "@types/jest": "^25.1.4",
-    "@types/node": "^13.1.8",
+    "@types/node": "^13.9.8",
     "@types/react": "^16.9.19",
-    "@typescript-eslint/eslint-plugin": "^2.17.0",
-    "@typescript-eslint/parser": "^2.17.0",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
+    "@typescript-eslint/parser": "^2.26.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.1.0",
     "concurrently": "^5.0.2",
@@ -53,12 +55,12 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.0",
     "eslint-plugin-testcafe": "^0.2.1",
-    "jest": "^25.1.0",
+    "jest": "^25.2.4",
     "prettier": "^2.0.2",
     "serverless": "^1.61.3",
-    "serverless-next.js": "^1.8.0",
+    "serverless-next.js": "^1.9.7",
     "testcafe": "^1.8.1",
-    "ts-jest": "^25.0.0",
+    "ts-jest": "^25.3.0",
     "typescript": "^3.7.5",
     "wait-on": "^4.0.0"
   },

src/containers/AboutPage/AboutPage.stories.tsx

@@ -6,4 +6,4 @@ export default {
   title: 'AboutPage',
 };
 
-export const Default = () => <AboutPage />;
+export const Default = () => <AboutPage todos={{}} />;

src/containers/AboutPage/AboutPage.tsx

@@ -3,7 +3,11 @@ import Link from 'next/link';
 
 import AboutUs from 'components/AboutUs';
 
-const About: React.FC = () => {
+type Props = {
+  todos: object;
+};
+
+const About = ({ todos }: Props) => {
   return (
     <>
       <ul>
@@ -16,6 +20,9 @@ const About: React.FC = () => {
       </ul>
 
       <AboutUs />
+
+      <div>TODOS:</div>
+      <div>{JSON.stringify(todos)}</div>
     </>
   );
 };

src/containers/HomePage/HomePage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 
-const HomePage: React.FC = () => {
+const HomePage = () => {
   return (
     <>
       <ul>

src/pages/about.tsx

@@ -1,9 +1,20 @@
 import React from 'react';
+import ky from 'ky-universal';
+import { GetServerSideProps } from 'next';
 
 import AboutPage from '../containers/AboutPage';
 
-const About = () => {
-  return <AboutPage />;
+type Props = {
+  todos: object;
+};
+
+const About = ({ todos }: Props) => {
+  return <AboutPage todos={todos} />;
+};
+
+export const getServerSideProps: GetServerSideProps<Props> = async (_ctx) => {
+  const todos = await ky('https://jsonplaceholder.typicode.com/todos/1').json<object>();
+  return { props: { todos } };
 };
 
 export default About;