Most used NextJS renderings

1.Server Side Rendering(SSR)

In SSR, pages are rendered on the server at request time. When a user requests a page, the server generates the HTML on the fly, and then that HTML is sent to the client. This approach can improve SEO and provide a faster initial load for users since they receive a fully-rendered HTML page

  1. Client-Side Rendering (CSR)

In CSR, the page is rendered on the client side. The HTML is initially empty or minimal, and the browser fetches and renders data after the initial load. This approach is suitable for data that doesn’t require SEO or where fast updates are needed, like interactive dashboards.

				
					"use client"
import React, { useEffect, useState } from 'react';

const Page = () => {
  const [items, setItems] = useState<any[]>([]);
  console.log("items", items)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://dummyjson.com/products/categories);
        
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        
        const data = await response.json();
        setItems(data);
      } catch (error) {
        console.error(error);
      } 
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Categories</h1>
      <ul>
        {items.map((item: any) => (
          <li key={item.categoryId}>{item.categoryName}</li>
        ))}
      </ul>
    </div>
  );
};

export default Page;
				
			

Inquiry now