Dor Peled
July 27th 2021
Development of a server-side rendered application using Nest.JS and Next.JS
First a bit of background about me
My name is Dor Peled, I'm a fresh out of college Software Engineer from Israel and this is my first blog post in the field of web development.
I've been developing increasingly complex applications with React, Redux and Node.JS technologies for the past 3 years or so. along the way I was looking to improve the development and deployment experience of such projects and that's when I started getting into technologies like Typescript, GraphQL (with Apollo), Nest.JS and Next.JS.
Next.JS and Nest.JS are currently my favorites and I'll do my best explaining the development flow I used to create this blog.
Prerequisites
- Intermediate level of React knowledge (also some redux)
- Good understanding of Node.JS (Express), HTTP protocol principles (request, response, headers etc)
Technology Stack
- Nest.JS - RESTful API, dockerized and hosted on a DigitalOcean VPS
- TypeORM - I was using Postgres but it doesn't matter which DB you want to use really
- JWT - Auth uses json web tokens
- Next.JS - using SSR, will be hosted on Vercel
- Redux-Toolkit - a bit of redux usage together with next-redux-wrapper
Why Nest.JS?
Nest.JS is currently my favorite backend technology when using Node.JS, there are many reasons why I like it so much. I love the opinionated nature this framework, as it forces the developer to use conventions and best-practices (including Typescript) all across the backend, as a result the API is very scalable and contains less loose ends.
Why Next.JS?
Next.JS allows us to build hybrid applications (SSG and SSR), which enables pre-rendering at build time (SSG) or per request (SSR). this blog purely uses SSR so that users get no unauthenticated flashing or loading.
Next.JS's router is file-system based, meaning we need to create our pages inside the default
/pages folder of the app, it makes scaling the frontend application easier.Example: if we had a file
/pages/posts/[id].tsx then we have a Single-Post-Page.Next.JS allows us to export a function like seen below:
export const getServerSideProps: GetServerSideProps = async (context) => { // ... }
This function will be called for any request to this page. If the app is deployed to AWS or Vercel then
getServerSideProps gets called as a serverless function.The Context Param
The context parameter is really important for any SSR app that wishes to make use of Auth as it contains any client-side cookies that should be sent along with requests to our Nest.JS backend.
Let's say that our cookie's name is "jwt", you can then access cookies by doing the following:
const cookie = context.req.cookies['jwt'];
1 Comment to "Development of a server-side rendered application using Nest.JS and Next.JS"
Dor Peled Says:
July 27, 2021 at 7:00 AM
This is an example comment..