From 86d87d640ab635d485ab9258a4d47f200c909ac3 Mon Sep 17 00:00:00 2001 From: David Glymph Date: Fri, 3 Mar 2023 13:31:53 -0500 Subject: [PATCH 1/4] fix aspect ratio of photo on people pages --- components/layout/text-image-section/text-image-section.js | 1 + pages/people/[slug].js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/layout/text-image-section/text-image-section.js b/components/layout/text-image-section/text-image-section.js index e5c3579e..ad4dc9a2 100644 --- a/components/layout/text-image-section/text-image-section.js +++ b/components/layout/text-image-section/text-image-section.js @@ -22,6 +22,7 @@ export const TextImageSection = ({ imageUrl, imageHeight, imageWidth, children } width={imageWidth} height={imageHeight} layout="responsive" + objectFit='contain' /> } diff --git a/pages/people/[slug].js b/pages/people/[slug].js index 194820c8..01e86d1d 100644 --- a/pages/people/[slug].js +++ b/pages/people/[slug].js @@ -26,8 +26,8 @@ export default function Person() { { person.fullName } From dbd3d6bd5e4fb462562b0c722cd12705b283e15c Mon Sep 17 00:00:00 2001 From: David Glymph Date: Fri, 3 Mar 2023 14:58:55 -0500 Subject: [PATCH 2/4] fetch content from strapi in `getServerSideProps` --- pages/collaborations/[id].js | 36 +++++++++++++--------------------- pages/groups/[id].js | 35 +++++++++++++-------------------- pages/people/[slug].js | 33 ++++++++++++------------------- pages/projects/[id].js | 38 ++++++++++++------------------------ pages/teams/[id].js | 32 ++++++++++++------------------ 5 files changed, 66 insertions(+), 108 deletions(-) diff --git a/pages/collaborations/[id].js b/pages/collaborations/[id].js index 4cc275b4..bbe0e651 100644 --- a/pages/collaborations/[id].js +++ b/pages/collaborations/[id].js @@ -1,29 +1,10 @@ -import { Fragment, useEffect, useState } from 'react' -import { useRouter } from 'next/router' -import { Typography } from '@mui/material' +import { Fragment } from 'react' import { fetchStrapiCollaboration } from '../../lib/strapi' import { - Link, Page, PersonCard, PersonGrid, Pre, Section, + Link, Page, PersonCard, PersonGrid, Section, } from '../../components' -export default function Collaboration() { - const router = useRouter() - const [collaboration, setCollaboration] = useState(null) - - useEffect(() => { - const fetchData = async () => { - const collab = await fetchStrapiCollaboration(router.query.id) - setCollaboration(collab) - } - fetchData() - }, [router.query.id]) - - if (!collaboration) { - return 'Loading...' - } - - console.log(collaboration) - +export default function Collaboration({ collaboration }) { return ( ) } + +export async function getServerSideProps({ params, res }) { + res.setHeader( + 'Cache-Control', + 'no-cache, no-store, must-revalidate' + ) + + const collaboration = await fetchStrapiCollaboration(params.id) + + return { props: { collaboration: JSON.parse(JSON.stringify(collaboration)) } } +} diff --git a/pages/groups/[id].js b/pages/groups/[id].js index 5b49c0c3..db6a07f4 100644 --- a/pages/groups/[id].js +++ b/pages/groups/[id].js @@ -1,34 +1,16 @@ -import { useEffect, useState } from 'react' -import { useRouter } from 'next/router' -import { Typography, Box, Divider } from '@mui/material' +import { Typography, Divider } from '@mui/material' import { fetchStrapiGroup } from '../../lib/strapi' -import { Link, Page, Pre } from '../../components' +import { Link, Page } from '../../components' import { Section } from '../../components/layout' import { PersonCard, PersonGrid } from "../../components/people/"; -export default function ResearchGroup() { - const router = useRouter() - const [researchGroup, setResearchGroup] = useState(null) - - useEffect(() => { - const fetchData = async () => { - const group = await fetchStrapiGroup(router.query.id) - setResearchGroup(group) - } - fetchData() - }, [router.query.id]) - - if (!researchGroup) { - return 'Loading...' - } - +export default function ResearchGroup({ researchGroup }) { return ( - {researchGroup.description}
@@ -104,3 +86,14 @@ export default function ResearchGroup() { ) } + +export async function getServerSideProps({ params, res }) { + res.setHeader( + 'Cache-Control', + 'no-cache, no-store, must-revalidate' + ) + + const researchGroup = await fetchStrapiGroup(params.id) + + return { props: { researchGroup: JSON.parse(JSON.stringify(researchGroup)) } } +} diff --git a/pages/people/[slug].js b/pages/people/[slug].js index 01e86d1d..aeb1ed79 100644 --- a/pages/people/[slug].js +++ b/pages/people/[slug].js @@ -1,27 +1,9 @@ -import { useEffect, useState, Fragment } from 'react' -import { useRouter } from 'next/router' +import { Fragment } from 'react' import { Divider, Typography } from '@mui/material' import { fetchStrapiPerson } from "../../lib/strapi"; import { Link, Page, Section, TextImageSection } from '../../components' -export default function Person() { - const router = useRouter() - const [person, setPerson] = useState(null) - - useEffect(() => { - const fetchData = async () => { - const person = await fetchStrapiPerson(router.query.slug) - if (!person) { return } - setPerson(person) - } - fetchData() - }, [router.query.slug]) - - - if (!person) { - return 'Loading...' - } - +export default function Person({ person }) { return ( ) } + +export async function getServerSideProps({ params, res }) { + res.setHeader( + 'Cache-Control', + 'no-cache, no-store, must-revalidate' + ) + + const person = await fetchStrapiPerson(params.slug) + + return { props: { person: JSON.parse(JSON.stringify(person)) } } +} diff --git a/pages/projects/[id].js b/pages/projects/[id].js index 9fbe7b11..72549c5c 100644 --- a/pages/projects/[id].js +++ b/pages/projects/[id].js @@ -1,35 +1,10 @@ -import { useEffect, useState } from 'react' -import { useRouter } from 'next/router' import { Divider, Typography } from '@mui/material' import { fetchStrapiProject } from '../../lib/strapi' import { Link, Page } from '../../components' -import { Pre } from '../../components/pre' import { Section } from '../../components/layout' import { PersonCard, PersonGrid } from "../../components/people/"; -export default function Project() { - const router = useRouter() - const [project, setProject] = useState(null) - - try { - useEffect(() => { - const fetchData = async () => { - const project = await fetchStrapiProject(router.query.id) - setProject(project) - } - fetchData() - .catch(console.error) - }, [router.query.id]) - - if (!project) { - return 'Loading...' - } -} catch (error) { - console.log(error.response) -} - - - +export default function Project({ project }) { return ( ) } + +export async function getServerSideProps({ params, res }) { + res.setHeader( + 'Cache-Control', + 'no-cache, no-store, must-revalidate' + ) + + const project = await fetchStrapiProject(params.id) + + return { props: { project: JSON.parse(JSON.stringify(project)) } } +} diff --git a/pages/teams/[id].js b/pages/teams/[id].js index acfd8a69..ad0e56f5 100644 --- a/pages/teams/[id].js +++ b/pages/teams/[id].js @@ -1,27 +1,10 @@ -import { useEffect, useState } from 'react' -import { useRouter } from 'next/router' -import { Typography, Box } from '@mui/material' +import { Typography } from '@mui/material' import { fetchStrapiTeam } from '../../lib/strapi' import { Page } from '../../components' import { PersonCard, PersonGrid } from "../../components/people/"; import { Section } from '../../components/layout' -export default function ResearchGroup() { - const router = useRouter() - const [team, setTeam] = useState(null) - - useEffect(() => { - const fetchData = async () => { - const group = await fetchStrapiTeam(router.query.id) - setTeam(group) - } - fetchData() - }, [router.query.id]) - - if (!team) { - return 'Loading...' - } - +export default function ResearchGroup({ team }) { return ( ) } + +export async function getServerSideProps({ params, res }) { + res.setHeader( + 'Cache-Control', + 'no-cache, no-store, must-revalidate' + ) + + const team = await fetchStrapiTeam(params.id) + + return { props: { team: JSON.parse(JSON.stringify(team)) } } +} From 5a447d99f8c7a869d38a5b38d2abb2966820ff20 Mon Sep 17 00:00:00 2001 From: David Glymph Date: Fri, 3 Mar 2023 15:41:57 -0500 Subject: [PATCH 3/4] switch dynamic strapi routes to SSR rather than SSG --- pages/[...slug].js | 24 +----------------------- 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/pages/[...slug].js b/pages/[...slug].js index 193b07c8..9e2c3bce 100644 --- a/pages/[...slug].js +++ b/pages/[...slug].js @@ -42,29 +42,7 @@ const DynamicPage = ({ ) } -export async function getStaticPaths(context) { - // Get all pages from Strapi - const allPages = context.locales.map(async (locale) => { - const localePages = await fetchAPI(`/api/pages`) - return localePages - }) - - const pages = await (await Promise.all(allPages)).flat() - - const paths = pages.map((page) => { - // Decompose the slug that was saved in Strapi - // const slugArray = !page.data[0].attributes.slug ? false : page.data[0].attributes.slug.split("/") - return { - params: { slug: [page.data[0].attributes.slug] }, - // Specify the locale to render - locale: page.locale, - } - }) - - return { paths, fallback: true } -} - -export async function getStaticProps(context) { +export async function getServerSideProps(context) { const { params, locale, locales, defaultLocale, preview = null } = context const globalLocale = await getGlobalData(locale) From ea00a859e2fdf6982fdf3835e35ce6ad60d0ae7a Mon Sep 17 00:00:00 2001 From: David Glymph Date: Fri, 3 Mar 2023 15:45:52 -0500 Subject: [PATCH 4/4] don't cache dynamic routes --- pages/[...slug].js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/pages/[...slug].js b/pages/[...slug].js index 9e2c3bce..f144467d 100644 --- a/pages/[...slug].js +++ b/pages/[...slug].js @@ -43,6 +43,11 @@ const DynamicPage = ({ } export async function getServerSideProps(context) { + context.res.setHeader( + 'Cache-Control', + 'no-cache, no-store, must-revalidate' + ) + const { params, locale, locales, defaultLocale, preview = null } = context const globalLocale = await getGlobalData(locale)