Implementation Overview

Before diving into the specific implementation details, we would like to give a brief overview of the system and two of the most components in it: server-side rendering empowered by Next.js and data querying engine implemented by Prisma. They are the backbone of the system and understanding how they work together is key to understanding the overall implementation.

Next.js

Next.js uses server-side rendering technology, which means that views are hydrated from a React template with the data supplied from the database. A typical page rendering React code would look like this:

// A page is a top-level react component that is responsible for rendering
// the entire web page
export default function Page({message}) {
	return (
		<Page title="page title">
			{message}
		</Page>
	)
}
 
// A function that supplies data used to hydrate the views 
// by using the component declared above
export function getServerSideProps() {
	return {
		// props field indicate the data required to be rendered into the page
		props: {
			message: "Hello Word"
		}
	}
}

The reason why we are using server-side rendering is that it consumes fewer resources, especially when JavaScript code is sent to the client. This will benefit us with quicker page load times and a smoother page transition, leading to a better user experience.

Prisma

Prisma is a powerful tool that enables us to query data from a database efficiently. We use Prisma because of its:

• intuitive API, which results in more efficient development
• encapsulated programming interface when accessing the database, making it less prone to security vulnerabilities like SQL injection
• useful tools for database migration and seeding

Prisma has an intermediate engine layer that is used to synthesize real SQL to query data from the database, avoiding the need for programmers to write raw SQL, by converting well-defined and easily readable programming interface to real SQL. After the data is returned, Prisma collects and compiles the raw data and returns a well-managed JavaScript object.