Next.js SSG
With Next.js, you can pre-render your page using Static Generation (SSG). Your pages will be generated at build time and statically served to visitors. It can also be cached by a CDN to maximize the performance.
This is supported by Nextra too. Here's an example:
Nextra has 11674 stars on GitHub!
The number above was generated at build time via getStaticProps
. With Incremental Static Regeneration enabled, it will be kept up to date.
Here's the MDX code for the example above:
import { useSSG } from 'nextra/ssg'export const getStaticProps = ({ params }) => { return fetch(`https://api.github.com/repos/shuding/nextra`) .then((res) => res.json()) .then((repo) => ({ props: { // We add an `ssg` field to the page props, // which will be provided to the Nextra `useSSG` hook. ssg: { stars: repo.stargazers_count, }, }, // The page will be considered as stale and regenerated every 60 seconds. revalidate: 60, }))}export const Stars = () => { // Get the data from SSG, and render it as a component. const { stars } = useSSG() return <strong>{stars}</strong>}Nextra has <Stars /> stars on GitHub!