Next Rendering: ISR and SSG

Author: prathamesh-mutkure

Nextjs/nextjs-rendering/pages/[uid].js

@@ -0,0 +1,19 @@
+// getServerSideProps with dynamic pages
+// No need of getStaticPaths
+// As there are no static paths to regenerate
+
+const UserIdPage = (props) => {
+  return <h1>{props.id}</h1>;
+};
+
+export default UserIdPage;
+
+export const getServerSideProps = async (context) => {
+  const { uid: userId } = context.params;
+
+  return {
+    props: {
+      id: `userid-${userId}`,
+    },
+  };
+};

Nextjs/nextjs-rendering/pages/index.js

@@ -1,6 +1,8 @@
 import fs from "fs";
 import path from "path";
 
+import Link from "next/link";
+
 // STATIC
 // Static HTML files, no data
 
@@ -11,6 +13,12 @@ import path from "path";
 // The page is generated during build time
 
 // ISR (Incremental Site Regeneration)
+// Static HTML Files + data (regenerated)
+// The files are regenerated after X seconds
+// After the request
+// The page is regenerated after a request only if it's older than X seconds
+// "revalidate" property is returned through getStaticProps
+// The regeneration takes place on server side
 
 // SSR (Server Side Rendering)
 
@@ -25,7 +33,9 @@ const Home = (props) => {
         {products.map((product) => {
           return (
             <li key={product.id}>
-              <h3>{product.title}</h3>
+              <Link href={`/products/${product.id}`}>
+                <h3>{product.title}</h3>
+              </Link>
               <p>{product.description}</p>
             </li>
           );
@@ -35,15 +45,30 @@ const Home = (props) => {
   );
 };
 
-export const getStaticProps = async () => {
+export const getStaticProps = async (context) => {
+  console.log("regenerating...");
+  // console.log(context);
   const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
   const jsonData = fs.readFileSync(filePath);
   const data = JSON.parse(jsonData);
 
+  if (!data) {
+    return {
+      notfound: true,
+    };
+  }
+
+  if (data.products.lenght == 0) {
+    return {
+      redirect: {},
+    };
+  }
+
   return {
     props: {
       products: data.products,
     },
+    revalidate: 10,
   };
 };
 

Nextjs/nextjs-rendering/pages/products/[pid].js

@@ -0,0 +1,95 @@
+import fs from "fs";
+import path from "path";
+
+// getStaticProps Error:
+// The getStaticProps funcion gives error when rendering SSG pages with dynamic route
+// The dynamic routes indicates that the page should be dynamic
+// Whereas the getStaticProps method indicates it is pre-rendered
+// This gives error
+
+// Link Prefetching:
+// When using <Link> element, Next.js will prefetch props for the linked pages
+// And then React will generate it on client side
+// This saves time loading the props
+// The pre-rendered page will only be served when user directly navigates to the page
+// NextJs does this optimization automatically in the backend
+
+// FALLBACK Prop
+// The Fallback prop can be used to pre-load only selected paths
+// The paths which are not pre-rendered, are rendered just in-time on client
+// Which otherwise give 404 error
+// The props are loaded at runtime, thus are undefined on intial load
+// This must handles
+// Thus, this works like standard react code
+// The initial page is empty
+//
+// 'blocking' value
+// The third way is to pre-render the page on server
+// The props are loaded on server
+// And the complete rendered page is sent to the client
+// This increases the request time but the user gets to see the complete page
+//
+// All these features gives flexibility to pre-render pages which are frequently visited
+// The rest other pages can be built on time
+
+const ProductDetails = (props) => {
+  const { product } = props;
+
+  if (!product) {
+    return <p>Loading...</p>;
+  }
+
+  return (
+    <div>
+      <h1>Product Details</h1>
+
+      <h3>{product.title}</h3>
+      <p>{product.description}</p>
+    </div>
+  );
+};
+
+const getData = async () => {
+  const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
+  const jsonData = fs.readFileSync(filePath);
+  const data = JSON.parse(jsonData);
+
+  return data;
+};
+
+export const getStaticProps = async (context) => {
+  const { pid } = context.params;
+
+  const data = await getData();
+  const product = data.products.find((product) => product.id === pid);
+
+  if (!product) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      product: product,
+    },
+  };
+};
+
+export const getStaticPaths = async (context) => {
+  const data = await getData();
+
+  const ids = data.products.map((p) => p.id);
+  const pathsWithParams = [ids[0], ids[1]].map((id) => ({
+    params: { pid: id },
+  }));
+
+  return {
+    paths: pathsWithParams,
+    // fallback: false,
+    fallback: true,
+    // fallback: "blocking",
+  };
+};
+
+export default ProductDetails;

Nextjs/nextjs-rendering/pages/user-profile.js

@@ -0,0 +1,22 @@
+// getServerSideProps
+// The getServerSideProps method executes for each request on server
+// It returns same properties as getStaticProps
+// The only difference is the timing and "context"
+// It has access to various additional properties like request and response
+// Which can be used to access things like cookies
+
+const UserProfile = (props) => {
+  return <h1>{props.username}</h1>;
+};
+
+export default UserProfile;
+
+export async function getServerSideProps(context) {
+  const { params, req, res } = context;
+
+  return {
+    props: {
+      username: "John Doe",
+    },
+  };
+}