Forem: Mohamed Hajith.M

Next.js Rendering Patterns

Mohamed Hajith.M — Sat, 17 May 2025 14:21:39 +0000

⚡Next.js Rendering Patterns Explained: Build a Fruit Shop Website 🍎

If you're new to Next.js or wondering how it makes React even better, you're in the right place! Next.js is a powerful React framework that simplifies building fast, SEO-friendly, and scalable web apps.

One of its biggest strengths? It supports multiple rendering patterns:

Static Site Generation (SSG)
Client-Side Rendering (CSR)
Server-Side Rendering (SSR)
Incremental Static Regeneration (ISR)

In this post, we’ll break them down using a real-world example: a fruit shop website. By the end, you’ll know when and how to use each rendering method in your Next.js apps.

🧠 What Is Rendering?

Rendering is how your website’s HTML is prepared and sent to a user’s browser. Think of it as how your fruit shop delivers information to customers visiting its website.

Let’s imagine you run a fruit shop website with these pages:

Page	URL	Description
Homepage	`/`	Static welcome page (rarely changes).
Dashboard	`/dashboard`	User-specific orders.
News	`/news`	Daily fruit price updates (changes often).
Banana Details	`/products/banana`	Banana price, updated hourly.

🍇 1. Static Site Generation (SSG) – "Printing a Poster"

What is SSG?

SSG pre-renders HTML at build time. The result is a static file served to all users—fast and SEO-friendly.

🔍 Real-World Analogy:
You print a welcome poster and hang it outside your fruit shop. Everyone sees the same poster until you reprint it.

🧑‍💻 Code Example: Homepage (`/`)

// pages/index.js
export async function getStaticProps() {
  return {
    props: {
      message: "Welcome to the Fruit Shop! Fresh fruits daily!",
    },
  };
}

export default function Home({ message }) {
  return <h1>{message}</h1>;
}

✅ When to Use

Static content like homepages, blogs, documentation.
Content that changes infrequently.

Pros & Cons

✔️ Fastest performance
✔️ Great SEO
❌ Requires rebuilds for updates

🍍 2. Client-Side Rendering (CSR) – "Asking After You Enter"

What is CSR?

CSR loads a blank page and then fetches data in the browser after JavaScript loads.

🔍 Real-World Analogy:
A customer enters your shop and asks, “What are my orders?” The clerk (JavaScript) looks them up and shows the list.

🧑‍💻 Code Example: Dashboard (`/dashboard`)

// pages/dashboard.js
import { useEffect, useState } from 'react';

export default function Dashboard() {
  const [orders, setOrders] = useState(null);

  useEffect(() => {
    fetch('/api/orders') // Simulated API
      .then(res => res.json())
      .then(data => setOrders(data));
  }, []);

  return <div>{orders ? orders.join(', ') : 'Loading orders...'}</div>;
}

✅ When to Use

Authenticated user pages (dashboards, profiles).
Apps where SEO doesn’t matter much.

Pros & Cons

✔️ Dynamic, user-specific content
✔️ Light server load
❌ Slower initial load
❌ Poor SEO

🍊 3. Server-Side Rendering (SSR) – "Asking Before Entering"

What is SSR?

SSR renders HTML on the server for every request, ensuring data is always fresh.

🔍 Real-World Analogy:
Before you show the News page, the shop checks the latest prices and prepares the page for the customer.

🧑‍💻 Code Example: News (`/news`)

// pages/news.js
export async function getServerSideProps() {
  const res = await fetch('https://api.fruits.com/news');
  const news = await res.json();
  return { props: { news } };
}

export default function News({ news }) {
  return <div>{news.title}</div>;
}

✅ When to Use

Frequently updated pages.
Pages requiring SEO + fresh data.

Pros & Cons

✔️ Always up-to-date
✔️ SEO-friendly
❌ Slower due to per-request rendering
❌ Higher server load

🍌 4. Incremental Static Regeneration (ISR) – "A Poster That Updates Hourly"

What is ISR?

ISR combines the speed of SSG with scheduled revalidation—regenerating static pages in the background.

🔍 Real-World Analogy:
You hang a banana price poster that updates every hour. Customers always see a poster, and it auto-refreshes behind the scenes.

🧑‍💻 Code Example: Banana Details (`/products/banana`)

// pages/products/banana.js
export async function getStaticProps() {
  const res = await fetch('https://api.fruits.com/banana');
  const banana = await res.json();
  return {
    props: { banana },
    revalidate: 3600, // Regenerate every hour
  };
}

export default function Banana({ banana }) {
  return <h1>Banana Price: ${banana.price}</h1>;
}

✅ When to Use

Product pages, marketing pages, or feeds.
Content updated on a regular schedule.

Pros & Cons

✔️ Static speed + freshness
✔️ SEO-friendly
❌ Slightly stale data between regenerations

📊 Rendering Pattern Comparison

Pattern	Freshness	Speed	Server Load	Best For
SSG	❌ Fixed	✅ Fastest	✅ Low	Static pages (Homepage)
CSR	✅ Client-side	❌ Slower	✅ Low	User dashboards
SSR	✅ Real-time	❌ Slower	❌ High	Real-time data (News)
ISR	✅ Periodically	✅ Fast	✅ Medium	Product pages (Banana Details)

🔀 Mix & Match Patterns in One App

That’s the beauty of Next.js—you can use all four patterns in one project:

🏠 Use SSG for the Homepage
👤 Use CSR for the Dashboard
📰 Use SSR for the News page
🍌 Use ISR for the Banana Details page

🚀 Why Use Next.js Instead of React Alone?

React is awesome for building UIs but focuses only on Client-Side Rendering (CSR). To add SSR or SSG, you'd need tools like Gatsby or custom setups.

Next.js simplifies it all:

Built-in support for SSR, SSG, ISR, and CSR
File-based routing (pages/)
Built-in SEO tools and performance optimizations
Freedom to mix rendering strategies per page

🎉 Ready to Build Your Fruit Shop?

Start in minutes:

npx create-next-app@latest my-fruit-shop
cd my-fruit-shop
npm run dev

Then create pages like:

pages/index.js for SSG
pages/dashboard.js for CSR
pages/news.js for SSR
pages/products/banana.js for ISR

When you're ready to deploy:

npm run build
npm run start

🍋 Final Thoughts

Next.js gives you powerful rendering tools to optimize for speed, SEO, and scalability. Whether you’re building a blog, dashboard, or online store—there’s a rendering pattern for every use case.

Happy coding! 🍓

Deploying Express.js with Prisma API on Vercel 🚀

Mohamed Hajith.M — Sun, 05 Jan 2025 18:16:14 +0000

Deploying Express.js with Prisma on Vercel: A Step-by-Step Guide

This guide walks you through the process of setting up an Express.js application with Prisma and deploying it to Vercel. Follow these steps to get your API up and running.

Why Choose Vercel?

Vercel makes it incredibly easy to deploy serverless functions with minimal configuration. It’s developer-friendly, highly performant, and offers built-in support for JavaScript frameworks like Next.js. Moreover, it seamlessly supports deploying custom Express.js APIs, giving you flexibility and ease of use.

Step 1: Set Up `index.js`

Create an index.js file in your project directory and add the following code:

const express = require('express');
const bodyParser = require('body-parser');
const { PrismaClient } = require('@prisma/client');
const cors = require('cors');

const app = express();
// const prisma = new PrismaClient();
const PORT = 5000;

// Initialize Prisma Client for serverless environments
let prisma;

if (!global.prisma) {
  global.prisma = new PrismaClient();
}
prisma = global.prisma;

// Middleware 
app.use(bodyParser.json());
app.use(cors());

// Replace this with your actual JWT secret
const JWT_SECRET = 'your_jwt_secret';

// Test database connection on startup
app.get('/', async (req, res) => {
  try {
    await prisma.$connect();
    res.status(200).json({ status: "Connected to database" });
  } catch (error) {
    console.error("Database connection error:", error);
    res.status(500).json({ 
      error: "Database connection error",
      details: error.message 
    });
  }
  // Don't disconnect here as it might affect other routes
});

// Export the Express app
module.exports = (req, res) => {  
  app(req, res);
};

Step 2: Update `package.json` Scripts

Add the following scripts to your package.json file:

"scripts": {
    "dev": "nodemon index.js",
    "start": "node index.js",
    "build": "prisma generate",
    "vercel-build": "prisma generate"
}

prisma generate ensures Prisma client is ready before deployment.
vercel-build runs during Vercel's build process to prepare Prisma.

Step 3: Create `vercel.json`

Create a vercel.json file in your project directory and include these lines:

{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.js"
    }
  ]
}

This configuration instructs Vercel to use the @vercel/node runtime to handle requests.

Step 4: Update `schema.prisma` for Serverless Deployments

Modify your schema.prisma file to include the shadowDatabaseUrl field for serverless environments:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}

The shadowDatabaseUrl is required for serverless platforms like Vercel to handle migrations effectively.

Step 5: Add Environment Variables to `.env`

Create a .env file in your project and include the following:

SHADOW_DATABASE_URL=YOUR_DATABASE_URL

Replace YOUR_DATABASE_URL with your actual database connection string.

Step 6: Vercel Hosting Build Commands

When deploying to Vercel, ensure the following build commands are configured:

Build Command:

   prisma generate

Output Directory: Leave this blank as it is not required for serverless functions.

Deployment Steps Summary:

Install the Vercel CLI:

   npm install -g vercel

   vercel login

Deploy your application:

   vercel

Vercel will automatically detect the configuration and deploy your API.

That’s it! Your Express.js app with Prisma is now live on Vercel. 🎉

Deploy an Express.js API on Vercel 🚀

Mohamed Hajith.M — Sun, 05 Jan 2025 18:08:11 +0000

Deploying Express.js on Vercel: Essential Steps

This guide outlines the minimum steps required to deploy a simple Express.js application to Vercel.

Step 1: Create `index.js`

Start by creating the index.js file as the main entry point of your Express application:

// index.js (Main entry point for Vercel)

const express = require('express');

const app = express();
const port = 3000;

app.use(express.json()); // Middleware to parse JSON requests

const JWT_SECRET = 'your_secret_key';

app.get('/', (req, res) => {
    res.send('Hello, World - Todo Api!');
});

// Other routes...
// Add additional routes as needed
.....

// Export the Express app
module.exports = (req, res) => {
    app(req, res);
};

This file serves as the main server code for your application. Vercel uses this exported function to handle incoming requests.

Step 2: Create or Update `vercel.json`

If a vercel.json file does not already exist in your project, create one in the root directory. If it exists, update it with the following configuration:

{
    "version": 2,
    "builds": [
      {
        "src": "index.js",
        "use": "@vercel/node"
      }
    ],
    "routes": [
      {
        "src": "/(.*)",
        "dest": "/index.js"
      }
    ]
}

Explanation:

builds: Defines how Vercel builds the project. The @vercel/node builder handles Node.js applications.
routes: Routes all requests to index.js.

Deployment

Install the Vercel CLI (if not already installed):

   npm install -g vercel

Deploy your application:

   vercel

Follow the prompts to complete the deployment. Vercel will provide you with a live URL for your application.

Your Express.js application is now live on Vercel! 🎉

Forem: Mohamed Hajith.M

Next.js Rendering Patterns

⚡Next.js Rendering Patterns Explained: Build a Fruit Shop Website 🍎

🧠 What Is Rendering?

🍇 1. Static Site Generation (SSG) – "Printing a Poster"

What is SSG?

🧑‍💻 Code Example: Homepage (/)

✅ When to Use

Pros & Cons

🍍 2. Client-Side Rendering (CSR) – "Asking After You Enter"

What is CSR?

🧑‍💻 Code Example: Dashboard (/dashboard)

✅ When to Use

Pros & Cons

🍊 3. Server-Side Rendering (SSR) – "Asking Before Entering"

What is SSR?

🧑‍💻 Code Example: News (/news)

✅ When to Use

Pros & Cons

🍌 4. Incremental Static Regeneration (ISR) – "A Poster That Updates Hourly"

What is ISR?

🧑‍💻 Code Example: Banana Details (/products/banana)

✅ When to Use

Pros & Cons

📊 Rendering Pattern Comparison

🔀 Mix & Match Patterns in One App

🚀 Why Use Next.js Instead of React Alone?

🎉 Ready to Build Your Fruit Shop?

🍋 Final Thoughts

Deploying Express.js with Prisma API on Vercel 🚀

Deploying Express.js with Prisma on Vercel: A Step-by-Step Guide

Why Choose Vercel?

Step 1: Set Up index.js

Step 2: Update package.json Scripts

Step 3: Create vercel.json

Step 4: Update schema.prisma for Serverless Deployments

Step 5: Add Environment Variables to .env

Step 6: Vercel Hosting Build Commands

Deployment Steps Summary:

Deploy an Express.js API on Vercel 🚀

Deploying Express.js on Vercel: Essential Steps

Step 1: Create index.js

Step 2: Create or Update vercel.json

Explanation:

Deployment

🧑‍💻 Code Example: Homepage (`/`)

🧑‍💻 Code Example: Dashboard (`/dashboard`)

🧑‍💻 Code Example: News (`/news`)

🧑‍💻 Code Example: Banana Details (`/products/banana`)

Step 1: Set Up `index.js`

Step 2: Update `package.json` Scripts

Step 3: Create `vercel.json`

Step 4: Update `schema.prisma` for Serverless Deployments

Step 5: Add Environment Variables to `.env`

Step 1: Create `index.js`

Step 2: Create or Update `vercel.json`