Server-Side Rendering in Next 13.4

The world as we knew it is have changed with new app directory on Next JS.

Getting Started

Server-Side Rendering

Next.js provides two functions, getStaticProps and getServerSideProps, for server-side data fetching during the rendering process. These functions allow you to fetch data from an API or a database and pass it as props to your page components.

export async function getStaticProps() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();

  return {
    props: {
      data,
    },
  };
}

function MyPage({ data }) {
  return (
    <div>
      {/* Display the fetched data */}
      {data && <p>{data.message}</p>}
    </div>
  );
}

export default MyPage;

In the code snippet above, we define the getStaticProps function, which is a special function Next.js recognizes for pre-rendering. Inside getStaticProps, we fetch data from an API and return it as the data prop. The MyPage component receives the fetched data as a prop and renders it accordingly.

It's important to note that getStaticProps is used for static generation, where the page content is pre-rendered at build time, while getServerSideProps is used for server-side rendering on each request. You can choose the appropriate function based on your specific use case. Next.js also provides other data fetching options, such as getInitialProps for legacy support or more advanced scenarios. These options offer flexibility in handling data fetching based on your application's needs.

Next.js simplifies the process of data fetching by seamlessly integrating it into the rendering pipeline. Whether you need to fetch data on the client-side or during server-side rendering, Next.js provides the necessary tools to make data fetching efficient and straightforward.

**Note: Server-side rendering involves generating the HTML for a web page on the server and sending it to the client. **

Learn More

You can learn more from Server-side Rendering (SSR).

Connect with me ^_^

If you like this article, kindly follow my github account for more and be sure to ⭐ it.