Next.js - Pre-Rendering

---

---

In Next.js, pre-rendering technique provides better user experience and SEO results for the webpage. In this chapter we will learn what is pre rendering, why it is used, and types of pre-rendering.

What is Pre-Rendering?

Pre-rendering is a technique used in Next.js for generating HTML pages in advance, instead of serving a blank HTML page and waiting for JavaScript to render the content on the client side. By default, Next.js pre-renders every page. The process of loading JavaScript to pre-rendered HTML page is called hydration.

Why Pre-Rendering?

• Pre-rendering reduces the interacting time by delivering ready-to-use HTML.
• Search engines can crawl pre-rendered content more easily.
• Pre-rendering give better user experience.

Types of Pre-Rendering

In Next.js, we have two forms of pre-rendering:

• Static Site Generation
• Server Side Rendering

Static Site Generation

Static Site Generation is a server rendering strategy where we generate HTML pages at the time of building application. That means in production, the HTML page is generated when we run 'next build'. This HTML will then be reused on each request.

By default all the Next.js components that does not involve fetching data from external source follows static rendering strategy. Static rendering is commonly used in blog pages, documentation pages, and marketing pages.

Implement Static Site Generation

To implement static site in Next.js we can use `getStaticProps()` function to fetch data during build time. See the example below.

export async function getStaticProps() {
    const data = await fetch(
    				'link/to/api.com').then( res => res.json() );

    return {
        props: { data }, // Pass data as props to the component
    };
}

export default function HomePage({ data }) {
    return <div>{data.title}</div>;
}

Server Side Rendering

Server Side Rendering (SSR) is a feature in Next.js, where the server processes a request and sends a fully rendered HTML page to the client. In Server-Side Rendering, the HTML page is generated on each request. So the browser doesnt have to wait for JavaScript to execute before displaying content. This make page load faster and visible to search engines.

In the other words, Server-Side Rendering ensures dynamic contents of a webpage is fetched and rendered on the server before being sent to the client.

Implement Server Side Rendering

Server Side Rendering can be implemented using the `getServerSideProps()` function. See the code below:

export async function getServerSideProps() {
    // Fetch data from API
    const response = await fetch('https://link/to/api');
    const data = await response.json();

    // Pass data as prop to the page component
    return { props: { data } }; 
}

export default function Page({ data }) {
    return (
        <div>
            <h1>Server-Side Rendered Data</h1>
            <ul>
                {data.map((item) => (
                    <li key={item.id}>{item.title}</li>
                ))}
            </ul>
        </div>
    );
}