client: remove server as build requirement

This means public/unlisted posts and the home-page are no longer
generated at build-time, so TTFB may be increased for the first user to
load/access a page. Cache-Control headers are set so if the RP / server
supports it the results should be cached for future users.
This commit is contained in:
Max Leiter 2022-04-06 10:41:42 -07:00
parent c73b7f66a3
commit 2ecf1b21ca
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
3 changed files with 26 additions and 31 deletions

View file

@ -2,11 +2,11 @@ import styles from '@styles/Home.module.css'
import Header from '@components/header' import Header from '@components/header'
import PageSeo from '@components/page-seo' import PageSeo from '@components/page-seo'
import HomeComponent from '@components/home' import HomeComponent from '@components/home'
import { Page, Text, Spacer, Tabs, Textarea, Card } from '@geist-ui/core' import { Page, Text } from '@geist-ui/core'
import { GetServerSideProps } from 'next'
export async function getStaticProps() { export const getServerSideProps: GetServerSideProps = async ({ res }) => {
try { try {
const resp = await fetch(process.env.API_URL + `/welcome`, const resp = await fetch(process.env.API_URL + `/welcome`,
{ {
method: "GET", method: "GET",
@ -17,6 +17,12 @@ export async function getStaticProps() {
}) })
const { title, content, rendered } = await resp.json() const { title, content, rendered } = await resp.json()
res.setHeader(
'Cache-Control',
`public, s-maxage=${60 * 60 * 24 * 360}, max-age=${60 * 60 * 24 * 360}`
)
return { return {
props: { props: {
introContent: content || null, introContent: content || null,

View file

@ -1,4 +1,4 @@
import type { GetStaticPaths, GetStaticProps } from "next"; import type { GetServerSideProps, GetStaticPaths, GetStaticProps } from "next";
import type { Post } from "@lib/types"; import type { Post } from "@lib/types";
import PostPage from "@components/post-page"; import PostPage from "@components/post-page";
@ -11,25 +11,7 @@ const PostView = ({ post }: PostProps) => {
return <PostPage post={post} /> return <PostPage post={post} />
} }
export const getStaticPaths: GetStaticPaths = async () => { export const getServerSideProps: GetServerSideProps = async ({ params, res }) => {
const posts = await fetch(process.env.API_URL + `/posts/`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"x-secret-key": process.env.SECRET_KEY || "",
}
})
const json = await posts.json()
const filtered = json.filter((post: Post) => post.visibility === "public" || post.visibility === "unlisted")
const paths = filtered.map((post: Post) => ({
params: { id: post.id }
}))
return { paths, fallback: 'blocking' }
}
export const getStaticProps: GetStaticProps = async ({ params }) => {
const post = await fetch(process.env.API_URL + `/posts/${params?.id}`, { const post = await fetch(process.env.API_URL + `/posts/${params?.id}`, {
method: "GET", method: "GET",
headers: { headers: {
@ -38,21 +20,29 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
} }
}) })
if (!post.ok) { const sMaxAge = 60 * 60 * 24
res.setHeader(
'Cache-Control',
`public, s-maxage=${sMaxAge}, max-age=${sMaxAge}`
)
if (!post.ok || post.status !== 200) {
return { return {
redirect: { redirect: {
destination: "/404", destination: '/404',
permanent: false,
}, },
props: { props: {}
post: null
}
} }
} }
const json = await post.json();
return { return {
props: { props: {
post: await post.json() post: json
}, }
} }
} }

View file

@ -13,7 +13,6 @@ describe("Config", () => {
expect(result).toHaveProperty("enable_admin") expect(result).toHaveProperty("enable_admin")
expect(result).toHaveProperty("secret_key") expect(result).toHaveProperty("secret_key")
expect(result).toHaveProperty("registration_password") expect(result).toHaveProperty("registration_password")
expect(result).toHaveProperty("welcome_content")
expect(result).toHaveProperty("welcome_title") expect(result).toHaveProperty("welcome_title")
}) })