fix: moving away from SSG aspects due to Azure/azure-dev#1270

Azure-Samples · Dec 15, 2022 · ad67b39 · ad67b39
1 parent 3ec2b26
commit ad67b39
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 30 deletions.
diff --git a/packages/blog/lib/media.ts b/packages/blog/lib/media.ts
@@ -1,6 +1,9 @@
 import { getStrapiURL } from "./api"
 
 export function getStrapiMedia(media) {
+  if (!media) {
+    return ""
+  }
   const { url } = media.data.attributes
   const imageUrl = url.startsWith("/") ? getStrapiURL(url) : url
   return imageUrl

diff --git a/packages/blog/next.config.js b/packages/blog/next.config.js
@@ -6,6 +6,7 @@ const nextConfig = {
     loader: "default",
     domains: ["localhost"],
   },
+  output: "standalone",
 }
 
 module.exports = nextConfig
diff --git a/packages/blog/pages/_app.tsx b/packages/blog/pages/_app.tsx
@@ -19,10 +19,10 @@ const MyApp = ({ Component, pageProps }) => {
       <Head>
         <link
           rel="shortcut icon"
-          href={getStrapiMedia(global.attributes.favicon)}
+          href={getStrapiMedia(global?.attributes?.favicon)}
         />
       </Head>
-      <GlobalContext.Provider value={global.attributes}>
+      <GlobalContext.Provider value={global?.attributes}>
         <Component {...pageProps} />
       </GlobalContext.Provider>
     </>
@@ -33,10 +33,25 @@ const MyApp = ({ Component, pageProps }) => {
 // have getStaticProps. So article, category and home pages still get SSG.
 // Hopefully we can replace this with getStaticProps once this issue is fixed:
 // https://github.com/vercel/next.js/discussions/10949
-MyApp.getInitialProps = async (ctx) => {
-  // Calls page's `getInitialProps` and fills `appProps.pageProps`
+// MyApp.getInitialProps = async (ctx) => {
+//   // Calls page's `getInitialProps` and fills `appProps.pageProps`
+//   const appProps = await App.getInitialProps(ctx)
+//   // Fetch global site settings from Strapi
+//   const globalRes = await fetchAPI("/global", {
+//     populate: {
+//       favicon: "*",
+//       defaultSeo: {
+//         populate: "*",
+//       },
+//     },
+//   })
+//   // Pass the data to our page via props
+//   return { ...appProps, pageProps: { global: globalRes.data } }
+// }
+
+export async function getServerSideProps(ctx) {
   const appProps = await App.getInitialProps(ctx)
-  // Fetch global site settings from Strapi
+
   const globalRes = await fetchAPI("/global", {
     populate: {
       favicon: "*",

diff --git a/packages/blog/pages/article/[slug].tsx b/packages/blog/pages/article/[slug].tsx
@@ -60,20 +60,42 @@ const Article = ({ article, categories }) => {
   )
 }
 
-export async function getStaticPaths() {
-  const articlesRes = await fetchAPI("/articles", { fields: ["slug"] })
+// export async function getStaticPaths() {
+//   try {
+//     const articlesRes = await fetchAPI("/articles", { fields: ["slug"] })
 
-  return {
-    paths: articlesRes.data.map((article) => ({
-      params: {
-        slug: article.attributes.slug,
-      },
-    })),
-    fallback: false,
-  }
-}
+//     return {
+//       paths: articlesRes.data.map((article) => ({
+//         params: {
+//           slug: article.attributes.slug,
+//         },
+//       })),
+//       fallback: false,
+//     }
+//   } catch (e) {
+//     return {
+//       paths: [],
+//       fallback: "blocking",
+//     }
+//   }
+// }
+
+// export async function getStaticProps({ params }) {
+//   const articlesRes = await fetchAPI("/articles", {
+//     filters: {
+//       slug: params.slug,
+//     },
+//     populate: "*",
+//   })
+//   const categoriesRes = await fetchAPI("/categories")
+
+//   return {
+//     props: { article: articlesRes.data[0], categories: categoriesRes },
+//     revalidate: 1,
+//   }
+// }
 
-export async function getStaticProps({ params }) {
+export async function getServerSideProps({ params }) {
   const articlesRes = await fetchAPI("/articles", {
     filters: {
       slug: params.slug,

diff --git a/packages/blog/pages/category/[slug].tsx b/packages/blog/pages/category/[slug].tsx
@@ -22,20 +22,27 @@ const Category = ({ category, categories }) => {
   )
 }
 
-export async function getStaticPaths() {
-  const categoriesRes = await fetchAPI("/categories", { fields: ["slug"] })
+// export async function getStaticPaths() {
+//   try {
+//     const categoriesRes = await fetchAPI("/categories", { fields: ["slug"] })
 
-  return {
-    paths: categoriesRes.data.map((category) => ({
-      params: {
-        slug: category.attributes.slug,
-      },
-    })),
-    fallback: false,
-  }
-}
+//     return {
+//       paths: categoriesRes.data.map((category) => ({
+//         params: {
+//           slug: category.attributes.slug,
+//         },
+//       })),
+//       fallback: false,
+//     }
+//   } catch (e) {
+//     return {
+//       paths: [],
+//       fallback: "blocking",
+//     }
+//   }
+// }
 
-export async function getStaticProps({ params }) {
+export async function getServerSideProps({ params }) {
   const matchingCategories = await fetchAPI("/categories", {
     filters: { slug: params.slug },
     populate: {
@@ -55,4 +62,24 @@ export async function getStaticProps({ params }) {
   }
 }
 
+// export async function getStaticProps({ params }) {
+//   const matchingCategories = await fetchAPI("/categories", {
+//     filters: { slug: params.slug },
+//     populate: {
+//       articles: {
+//         populate: "*",
+//       },
+//     },
+//   })
+//   const allCategories = await fetchAPI("/categories")
+
+//   return {
+//     props: {
+//       category: matchingCategories.data[0],
+//       categories: allCategories,
+//     },
+//     revalidate: 1,
+//   }
+// }
+
 export default Category
diff --git a/packages/blog/pages/index.tsx b/packages/blog/pages/index.tsx
@@ -18,7 +18,7 @@ const Home = ({ articles, categories, homepage }) => {
   )
 }
 
-export async function getStaticProps() {
+export async function getServerSideProps() {
   // Run API calls in parallel
   const [articlesRes, categoriesRes, homepageRes] = await Promise.all([
     fetchAPI("/articles", { populate: "*" }),