Getting Started with Next.js: Part 4 - Server-Side Rendering (SSR)
Tags: nextjs, javascript, react, beginners
Published: 2024-04-30 02:39:53

## 🚀 Check Out My YouTube Channel! 🚀
Hi everyone! If you enjoy my content here on Dev.to, please consider subscribing to my YouTube channel [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak). I post practical full-stack development videos that complement my blog posts. Your support means a lot!

## Introduction
In Part 4 of our Next.js series, we explore server-side rendering (SSR), a standout feature of Next.js that enhances the performance and search engine optimization (SEO) of your applications. SSR allows your pages to be rendered on the server instead of the client, which can significantly speed up the loading times and improve the crawlability of your pages by search engines.

## Understanding Server-Side Rendering
SSR refers to the process of rendering web pages on the server instead of the client browser. Next.js automates much of this process, providing a seamless way to improve your application's initial load time and SEO without sacrificing the interactivity of a single-page application (SPA).

## Step 1: Setting Up SSR in Next.js
Next.js offers several data fetching methods for SSR. One common method is `getServerSideProps`, which fetches data for each page request at request time.

### Implementing `getServerSideProps`
1. **Create or Update a Page**:
   - Open or create a new file in the `pages` directory. For example, `pages/products.js`.
2. **Add `getServerSideProps` Function**:
   - Implement the `getServerSideProps` function to fetch data before rendering the page:
     ```javascript
     export async function getServerSideProps(context) {
       const res = await fetch(`https://api.example.com/products`);
       const data = await res.json();

       return {
         props: { products: data } // will be passed to the page component as props
       }
     }
     ```
   - This function gets called on each request and fetches data from an external API.

3. **Use the Data in Your Page Component**:
   - Utilize the fetched data in your page component:
     ```javascript
     function Products({ products }) {
       return (
         <div>
           <h1>Products</h1>
           <ul>
             {products.map(product => (
               <li key={product.id}>{product.name}</li>
             ))}
           </ul>
         </div>
       );
     }

     export default Products;
     ```

## Step 2: Testing Server-Side Rendering
To verify that your page is being rendered on the server:

1. **Run Your Development Server**:
   - If not already running, start your server with `npm run dev`.
2. **Visit Your Page**:
   - Navigate to `http://localhost:3000/products` in your browser. The products page should display the list of products fetched from the API.

## Benefits of SSR
- **Improved Performance**: By rendering pages on the server, users see the content faster, which can improve the user experience.
- **Better SEO**: Search engines can crawl your site more effectively as the content is already rendered before it reaches the browser.

## Conclusion
Server-side rendering is a powerful feature in Next.js that helps in building fast and SEO-friendly web applications. By understanding and implementing SSR, you can greatly enhance the initial loading time and overall performance of your applications.

Stay tuned for Part 5, where we will cover advanced topics such as static site generation and incremental static regeneration in Next.js.