getNextServerSideProps
The getNextServerSideProps
function lets you server side render your page with WordPress data outside of the template hierarchy using Next.js file based pages. The function should be returned from getServerSideProps which is required by Next.js to perform Server-Side Rendering (SSR)
Usage
The getNextServerSideProps
function accepts two arguments: the server side props context
, and an object (type GetNextServerSidePropsConfig
) with a Page
key. This should be your Next.js page component.
export async function getServerSideProps(context: GetServerSidePropsContext) {
return getNextServerSideProps(context, {
Page: MyPage,
});
}
Code language: JavaScript (javascript)
Faust uses MyPage
passed via getNextServerSideProps
to fetch the data using the ‘query’ and ‘variables’ properties. If the Page
does not have those properties then no queries will be performed.
This is merely a convenient way to fetch the page data while reusing the logic between components. If you are interested on how this is done you can review the source code here.
Config
Context Parameter
This is the same object that Next.js provides in the getServerSideProps
. You can read the list of parameters here.
GetNextServerSidePropsConfig Parameter
The second argument of getNextServerSideProps
is of type GetNextServerSidePropsConfig
and accepts the following parameters:
Page
: The current page component. It can be any valid React Element with the following properties:query
andvariables
.notFound
: ThenotFound
boolean allows the page to return a 404 status and 404 Page. This is used by Next.js to force a page return a 404 even if there was a successfully generated page before.redirect
: Theredirect
object allows redirecting to internal and external resources. It should match the shape of{ destination:
props
: Theprops
object is any other key value pairs of properties where each value is received by thePage
component.
getNextServerSideProps Return Values
The getNextServerSideProps
function returns an object that is required by the getServerSideProps
function.