update 05-server-side-rendering

Author: nasdan

04-frameworks/08-nextjs/05-server-side-rendering/README.md

@@ -28,8 +28,8 @@ _./app/cars/page.tsx_
 ...
 const CarListPage = async () => {
   // cache: 'force-cache' is the default
-- const carList = await getCarList({ next: { revalidate: 10 } }); // In seconds
-+ const carList = await getCarList({ cache: 'no-store' });
+- const carList = await api.getCarList({ next: { revalidate: 10 } }); // In seconds
++ const carList = await api.getCarList({ cache: 'no-store' });
   console.log('Car list at build time:', { carList });
 
   return <CarList carList={mapCarListFromApiToVm(carList)} />;
@@ -82,7 +82,7 @@ npm run start:prod
 
 We could add `options` property in the API method:
 
-_./app/cars/\[carId\]/\_api/car.api.ts_
+_./pods/car/api/car.api.ts_
 
 ```diff
 import { envConstants } from '@/_core/constants';
@@ -104,33 +104,30 @@ export const getCar = async (
 
 ```
 
-
 _./app/cars/\[carId\]/page.tsx_
 
 ```diff
 import React from 'react';
 import { Metadata } from 'next';
-import { getCar } from './_api';
-import { Car } from './_components';
-import { mapCarFromApiToVm } from './car.mappers';
+import { Car, api, mapCarFromApiToVm } from '#pods/car';
 
 interface Props {
   params: { carId: string };
 }
 
 export const generateMetadata = async (props: Props): Promise<Metadata> => {
   const { params } = props;
-- const car = await getCar(params.carId);
-+ const car = await getCar(params.carId, { cache: 'no-store' }); // Check 'force-cache' too
+- const car = await api.getCar(params.carId);
++ const car = await api.getCar(params.carId, { cache: 'no-store' }); // Check 'force-cache' too
   return {
     title: `Rent a car - Car ${car.name} details`,
   };
 };
 
 const CarPage = async (props: Props) => {
   const { params } = props;
-- const car = await getCar(params.carId);
-+ const car = await getCar(params.carId, { cache: 'no-store' }); // Check 'force-cache' too
+- const car = await api.getCar(params.carId);
++ const car = await api.getCar(params.carId, { cache: 'no-store' }); // Check 'force-cache' too
   console.log('Car page', car);
 
   return <Car car={mapCarFromApiToVm(car)} />;
@@ -140,9 +137,13 @@ export default CarPage;
 
 ```
 
-> `cache: 'force-cache'`  and empty cache: will fetch data only once but it will re-render the component on each refresh (F5).
+> All options will re-render the component on each refresh (F5)
+
+> `cache: 'force-cache'`: will fetch data only once.
+
+>`cache: 'no-store'`: will fetch data on each refresh (F5).
 
->`cache: 'no-store'`: will fetch data and re-render the component on each refresh (F5).
+>`next: { revalidate: 10 },`: will fetch data on each refresh (F5) after revalidate seconds.
 
 # About Basefactor + Lemoncode
 

04-frameworks/08-nextjs/05-server-side-rendering/app/cars/[carId]/_components/index.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

04-frameworks/08-nextjs/05-server-side-rendering/app/cars/_components/index.ts

@@ -3,28 +3,37 @@
   "version": "1.0.0",
   "description": "Nextjs examples",
   "scripts": {
-    "start": "run-p -l start:dev start:api-server",
+    "start": "run-p start:dev start:api-server",
     "start:dev": "next dev",
     "build": "rimraf .next && next build",
     "start:prod": "next start -p 8080",
     "start:api-server": "cd api-server && npm run mock-server",
     "postinstall": "cd ./api-server && npm install"
   },
+  "imports": {
+    "#*": [
+      "./src/*",
+      "./src/*.ts",
+      "./src/*.tsx",
+      "./src/*/index.ts",
+      "./src/*/index.tsx"
+    ]
+  },
   "author": "Lemoncode",
   "license": "MIT",
   "dependencies": {
-    "next": "^14.1.0",
+    "next": "^14.2.9",
     "normalize.css": "^8.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sharp": "^0.33.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sharp": "^0.33.5"
   },
   "devDependencies": {
-    "@types/node": "20.11.16",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/node": "22.5.4",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.5",
-    "typescript": "^5.3.3"
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.2"
   }
 }

04-frameworks/08-nextjs/05-server-side-rendering/next-env.d.ts

@@ -1,24 +1,23 @@
 import React from 'react';
 import { Metadata } from 'next';
-import { getCar } from './_api';
-import { Car } from './_components';
-import { mapCarFromApiToVm } from './car.mappers';
+import { Car, api, mapCarFromApiToVm } from '#pods/car';
 
 interface Props {
   params: { carId: string };
 }
 
 export const generateMetadata = async (props: Props): Promise<Metadata> => {
   const { params } = props;
-  const car = await getCar(params.carId, { cache: 'no-store' }); // Check 'force-cache' too
+  const car = await api.getCar(params.carId, { cache: 'no-store' }); // Check 'force-cache' too
+
   return {
     title: `Rent a car - Car ${car.name} details`,
   };
 };
 
 const CarPage = async (props: Props) => {
   const { params } = props;
-  const car = await getCar(params.carId, { cache: 'no-store' }); // Check 'force-cache' too
+  const car = await api.getCar(params.carId, { cache: 'no-store' }); // Check 'force-cache' too
   console.log('Car page', car);
 
   return <Car car={mapCarFromApiToVm(car)} />;

04-frameworks/08-nextjs/05-server-side-rendering/package.json

@@ -1,16 +1,14 @@
 import React from 'react';
 import { Metadata } from 'next';
-import { getCarList } from './_api';
-import { CarList } from './_components';
-import { mapCarListFromApiToVm } from './car-list.mappers';
+import { CarList, api, mapCarListFromApiToVm } from '#pods/car-list';
 
 export const metadata: Metadata = {
   title: 'Rent a car - Car list',
 };
 
 const CarListPage = async () => {
   // cache: 'force-cache' is the default value
-  const carList = await getCarList({ cache: 'no-store' }); // In seconds
+  const carList = await api.getCarList({ cache: 'no-store' });
   console.log('Car list at build time:', { carList });
 
   return <CarList carList={mapCarListFromApiToVm(carList)} />;