diff --git a/pages/index.tsx b/pages/index.tsx
index e315b90..8650bea 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,25 @@
 import ItemList from 'components/ItemList';
 import { useItems } from 'services/api-hooks';
+import { Item } from 'services/data-types';
 
-export default function Home() {
-  const { data, isSuccess } = useItems();
+interface HomeProps {
+  items: Item[] | undefined;
+}
+
+export default function Home({ items }: HomeProps) {
+  const { data, isSuccess } = useItems({ initialData: items });
 
   return <div>{isSuccess && data && <ItemList items={data} />}</div>;
 }
+
+export async function getStaticProps() {
+  const res = await fetch(`${process.env.SITE}/api/items`);
+  const items = await res.json();
+
+  return {
+    props: {
+      items,
+    },
+    revalidate: 30,
+  };
+}
diff --git a/services/api-hooks.ts b/services/api-hooks.ts
index 322f5f5..12b3d3a 100644
--- a/services/api-hooks.ts
+++ b/services/api-hooks.ts
@@ -1,4 +1,4 @@
-import { useQuery, useMutation, queryCache } from 'react-query';
+import { useQuery, useMutation, queryCache, QueryOptions } from 'react-query';
 import { Item } from 'services/data-types';
 
 const defaultQueryFn = (requestPath: string) =>
@@ -6,8 +6,8 @@ const defaultQueryFn = (requestPath: string) =>
 
 // queries
 
-export function useItems() {
-  return useQuery<Item[], string, string>('/api/items', defaultQueryFn);
+export function useItems<Result = Item[]>(options?: QueryOptions<Result>) {
+  return useQuery<Result, string>('/api/items', defaultQueryFn, options);
 }
 
 export function useMeData() {