# Appendix 1 - Server-side Rendering & getServerSideProps
Next.js allow for pre-rendering page content using Server-side Rendering (SSR).
It is done by defining a function with the special name getServerSideProps
. That function will be called on the backend and it's result will be sent to the function component.
Let's adjust the index.tsx
code to get the page rendered on the server, including the list of tasks - using getServerSideProps
// src/pages/index.tsx
import { InferGetServerSidePropsType } from "next"
import remultApi from "./api/[...remult]"
//...
export const getServerSideProps = remultApi.getServerSideProps(async req => {
return {
props: {
tasks: await fetchTasks()
}
}
})
export default function Home(
props: InferGetServerSidePropsType<typeof getServerSideProps>
) {
const [tasks, setTasks] = useState<Task[]>(props.tasks)
//...
useEffect(() => {
if (session.status === "unauthenticated") signIn()
//else fetchTasks().then(setTasks); <-- Delete this line
}, [session])
}
We wrap the implementation of the
getServerSideProps
with a call to remultApi'sgetServerSideProps
method that gets the function as a parameter. This method makes sure that the request is processed with a valid remult object that is already configured according the the user of the request.We use the
InferGetServerSidePropsType
type from next, to infer the return value of thegetServerSideProps
functionWe set the initial
tasks
state with the tasks received in the propsIn the
useEffect
method we remove the call tofetchTasks
since these tasks are already received in the props.
# Applying Access Rules
The getServerSideProps
runs on the backend, and is not subject to the apiAllowed
rules - so we'll need to do that ourselves based on the metadata of the entity
export const getServerSideProps = remultApi.getServerSideProps(async (req) => {
return {
props: {
tasks: taskRepo.metadata.apiReadAllowed ? await fetchTasks() : [],
},
};
});