add noStore() unstable utility to refetch cache in NEXT.js for da…

…ta from `CMS`

https://youtu.be/VBlSe8tvg4U&t=423

src/app/page.tsx

@@ -1,11 +1,14 @@
+import Link from 'next/link'
+
 import Stocks from '@/components/Stocks'
-import Program from '@/components/Programs'
 
 export default function Home() {
   return (
     <>
+      <Link prefetch={false} href={'/program/'} className="duration-200 block w-fit mt-5 mx-auto hover:text-custom-teal">
+        К программам
+      </Link>
       <Stocks />
-      <Program />
     </>
   )
 }

src/app/program/[slug]/page.tsx

@@ -1,9 +1,13 @@
+import {unstable_noStore as noStore} from 'next/cache'
+
 import Link from 'next/link'
 import Image from 'next/image'
 
 import {client, urlForImage, urlForFile} from '@/lib/sanity'
 
 const getData = async (slug) => {
+  noStore()
+
   const query = `
     *[_type == 'program' && slug.current == '${slug}'][0] {
         name,
@@ -24,8 +28,8 @@ const ProgramPage = async ({params}) => {
   return (
     <section className="grid w-screen h-screen place-items-center">
       <div className="flex flex-col items-center w-1/2 gap-5">
-        <Link href={'/'} className="mx-auto duration-200 w-fit hover:text-custom-teal">
-          На главную
+        <Link prefetch={false} href={'/program/'} className="duration-200 block w-fit mt-5 mx-auto hover:text-custom-teal">
+          К программам
         </Link>
         <div className="flex flex-col gap-5 p-5 border-2 border-custom-teal group">
           <div className="flex gap-5">

src/app/program/page.tsx

@@ -0,0 +1,14 @@
+import Link from 'next/link'
+
+import Programs from '@/components/Programs'
+
+export default function Program() {
+  return (
+    <>
+      <Link prefetch={false} href={'/'} className="duration-200 block w-fit mt-5 mx-auto hover:text-custom-teal">
+        На главную
+      </Link>
+      <Programs />
+    </>
+  )
+}

src/components/Programs.tsx

@@ -1,3 +1,5 @@
+import {unstable_noStore as noStore} from 'next/cache'
+
 import Link from 'next/link'
 import Image from 'next/image'
 import {client, urlForImage} from '@/lib/sanity'
@@ -11,9 +13,9 @@ interface Program {
   slug: {current: string}
 }
 
-export const revalidate = 30
-
 const getData = async (): Promise<Program[]> => {
+  noStore()
+
   const query = `
     *[_type == 'program'] {
         name,

src/components/Stocks.tsx

@@ -1,8 +1,12 @@
+import {unstable_noStore as noStore} from 'next/cache'
+
 import Image from 'next/image'
 
 import {client, urlForImage} from '@/lib/sanity'
 
 const getData = async () => {
+  noStore()
+
   const query = `
     *[_type == 'stocks'] {
         images