2 important functions of Next.js that are meant for a server-side generation. Here is an example of how to use it.
SSR gets content on the server at a build-time and renders a static page with it.
export async function getStaticPaths() {
//get list of entities
const { data: {snippets} } = await client.query(
{query: gql`{snippets { slug } }`}
);
//make an object that is needed for a getStaticProps and add our data there.
const paths = snippets.map(item => ({params: {slug: item.slug}}));
return { paths, fallback: false }
}
export async function getStaticProps( {params} ) {
//the query separately
const graphQuery = gql`
query GetSinglePostQuery($slug: String) {
snippets(where: {slug: $slug}) {
title
excerpt
slug
tags
content {
html
}
repo
example
}
}
`;
// API request
const { data: { snippets: [snippet] } } = await client.query(
{query: graphQuery, variables: {slug: params.slug}}
);
//here is a good place to modify data before passing it to the page for a render
return { props: {data: snippet} }
}getStaticPaths query for specific data, form an object and automatically passes it to a getStaticProps, where it's received, destructured, and used for a bunch of queries (one for a single entity passed from getStaticPaths).
The result of getStaticProps is an object with data for each snippet (queried based on an array of slugs from getStaticPaths).