Robbie DeVries | Software Engineer

60% faster page load times, increasing user satisfaction

Leaveraging the Incremental Static Regeneration (ISR) strategy by Next.js instead of the popular Server Side Rendering (SSR), Time To First Byte (TTFB) on thousands of pages is reduced from an average of 5.03 seconds to sub 0.5 seconds. This is done by building, caching and serving static pages on the server, and triggering rebuilds of those pages when the data changes.

import createSubscriber from 'pg-listen'

const subscriber = createSubscriber({
 connectionString: process.env.DATABASE_URL,
})

 // Listen to DB for changes
const channel = 'db-listener'
subscriber.notifications.on(channel, async (payload) => {

 // Parse the payload from DB
 const payLoadArr = payload.split(',')
 const [table, idType, id] = payLoadArr

 // Make request to revalidation endpoint
 const response = await fetch('/api/revalidation', {
   method: 'POST',
   headers: {
   'Content-Type': 'application/json',
   },
   body: JSON.stringify({
     table,
     idType,
     id,
     secret: process.env.REVALIDATION_SECRET,
   }),
 })
})

export default async function handler(req, res) {

 // DB queries for revalidation
 const users = async (id, idType) => {
   const usersData = await users.findMany({
     where: {
       id: id,
     }
   })
   return usersData.map((user) => `/users/${id}`)
 }

 // Setup to handle data from db-listener.ts
 const tableHelpers = {
   ads,
   users,
 }
 const { table, idType, id } = req.body
 const helperFunction = tableHelpers[table]
 const paths = await helperFunction(id, idType)

 // Calls Next.js Revalidate for each path
 await Promise.all(
   paths?.map(async (path) => {
     await res.revalidate(path)
   })
 )
}

-- First create the notification function in PostgreSQL
CREATE OR REPLACE FUNCTION notify_on_change()
RETURNS trigger AS $$
BEGIN
 -- Notify channel 'db-listener' with table,operation,id
 PERFORM pg_notify(
   'db-listener',
   TG_TABLE_NAME || ',' ||
   TG_OP || ',' ||
   NEW.id
 );
 RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Create trigger for specific table
CREATE TRIGGER notify_trigger
 AFTER INSERT OR UPDATE
 ON users
 FOR EACH ROW
 EXECUTE FUNCTION notify_on_change();

Robbie De Vries(deh-vreaze)

User Experience

Responsive Design

Architecture

Performance