Avoid Common Pitfalls with Next.js Server-Side Rendering

NextJS is an amazing JavaScript framework that uses ReactJS for building UI applications. It comes with many great features that help you build faster and SEO-friendly applications like server-side rendering. However, like any tool, if used incorrectly, it can end up decreasing your performance instead of improving it. And in this article, we will cover some of the incorrect uses of server-side rendering that might cause your web application to load slower instead of faster.

NextJS logo

1. Using slow requests in the getServerSideProps function

This function is the place where you might want to get the data required for your page component. Maybe load it from some 3rd part API, or maybe you just need to get it from your database. However, that should not take long. There should not be more than 2 seconds until your user gets to see the first items in the browser. And if your data fetching takes more than that, it is impossible to meet that criteria. Take a look at the next example.

const BadPractices = ({firstName, lastName}) => {
 return (
  <div>hello {firstName} {lastName}</div>
 )
}
 
const getData = async () => {
 const p = new Promise((res, rej) => {
  setTimeout(() => {
   res({ firstName: “john”, lastName: “doe”});
  }, 5000)
 });
 return p;
}
 
export async…