Building a SSR framework from Scratch

There's also a video podcast of this post with more information.

Have you ever wondered how frameworks like NextJS work under the hood? Today we will be building a scaled down version of NextJS.

Before we get started, let's take a look at the end result:

export const getServerSideProps = async ({ prisma }) => {
  let user = await prisma.user.findFirst();
  return { name: user?.name };
};

type Props = {
  name: string;
};

const Homepage = ({ name }: Props) => {
  return (
    <div>
      <p>Hello from prisma, {name}</p>
    </div>
  );
};

We'll be able to create files inside of a pages folder, when the route matches the file name, our server will call getServerSideProps and inject it into the component we export below it.

When the browser requests a page, the server will return the html markup, the browser will display it, and then React will mount on the client side afterwards.

If this sounds like a fun project, keep reading to see how this works!

High Level Concepts

This project uses a few…