feat: use react page title and cache server pages

Author: DNR500

README.md

@@ -151,9 +151,13 @@ over the data loading and give the users benefits of frontend cache data while t
 and forwards in the search page. 
 
 I have also used this on the movie details page. You could argue here that the frontend cache is not as useful 
-as caching on the search page But should the users again go back and forth between search and movie details pages
-maybe view the same page movie details multiple times then this will feel a little more performant to the user.
-I also decide to be consistent across the two pages how their data is initialised and hydrated.
+as caching on the search page. I also decide to be consistent across the two pages in how their data is initialised and hydrated.
+So we have a standard data loading pattern. 
+
+Currently the Next.js Link component isn't always able to provide "Soft navigation", 
+where routing is solely via the frontend rather instead a full page load - but once this problem is resolved the page could take full
+advantage of cache. In the meantime the page can be cached by setting the revalidate time of page.
+
 
 ### Styling
 

src/app/layout.tsx

@@ -10,7 +10,6 @@ const roboto = Roboto({
 });
 
 export const metadata: Metadata = {
-  title: 'Search for Movies',
   description: 'Discover movies with powerful search and detailed views.',
 };
 

src/app/movies/[movieId]/page.tsx

@@ -5,6 +5,8 @@ import { fetchMovieDetails } from '@/lib/fetch/fetchMovieDetails';
 import MovieDetailsSection from '@/features/movies/MovieDetailsSection';
 import { movieDetailQueryKey } from '@/lib/queryKeys';
 
+export const revalidate = 3600;
+
 const movieIdSlugSchema = z.string().regex(/^(\d+)-.+$/, 'Invalid movie slug format');
 
 type MoviePageProps = {

src/app/page.tsx

@@ -4,6 +4,8 @@ import { HomeSearchSection } from '@/features/home/HomeSearchSection';
 import { getQueryClient } from '@/lib/getQueryClient';
 import { moviesQueryKey } from '@/lib/queryKeys';
 
+export const revalidate = 300;
+
 interface HomePageProps {
   searchParams: Promise<Record<string, string | undefined>>;
 }

src/components/Pagination.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { AiFillCaretLeft, AiFillCaretRight } from 'react-icons/ai';
-import { MouseEventHandler } from 'react';
+import { HTMLAttributes } from 'react';
 
-interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+interface PaginationProps extends HTMLAttributes<HTMLElement> {
   currentPage: number;
   totalPages: number;
   onPageChange: (page: number) => void;
+  search?: string;
   readonly?: boolean;
 }
 
@@ -16,26 +17,42 @@ const getPageRange = (currentPage: number, totalPages: number): number[] => {
   );
 };
 
+function buildHref(page: number, search?: string) {
+  const params = new URLSearchParams();
+  if (search) params.set('search', search);
+  if (page > 1) params.set('page', String(page));
+  return `?${params.toString()}`;
+}
+
 export function Pagination({
   currentPage,
   totalPages,
   onPageChange,
+  search,
   readonly = false,
   ...rest
 }: PaginationProps) {
-  const buttonBase = 'px-2 py-1 rounded transition text-purple-800 hover:underline focus:underline';
-  const buttonCursor = readonly ? 'cursor-not-allowed' : 'cursor-pointer';
+  const linkBase = 'px-2 py-1 rounded transition text-purple-800 hover:underline focus:underline';
+  const linkCursor = readonly ? 'cursor-not-allowed' : 'cursor-pointer';
 
   const readonlyProps = {
-    disabled: readonly || undefined,
     tabIndex: readonly ? -1 : undefined,
+    'aria-disabled': readonly ? true : undefined,
   };
 
-  const createPageHandler: (page: number) => MouseEventHandler<HTMLButtonElement> =
-    (page) => (e) => {
+  // Handles SPA soft navigation and fallback to native on middle-click/new tab
+  const handleLinkClick = (page: number) => (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (readonly) {
       e.preventDefault();
-      if (!readonly) onPageChange(page);
-    };
+      return;
+    }
+    // Allow ctrl/cmd+click, shift+click (open in new tab/window)
+    if (e.defaultPrevented || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey || e.button !== 0) {
+      return;
+    }
+    e.preventDefault();
+    onPageChange(page);
+  };
 
   const pageRange = getPageRange(currentPage, totalPages);
 
@@ -49,67 +66,71 @@ export function Pagination({
     >
       <div className="w-4 flex justify-start">
         {currentPage > 1 && (
-          <button
-            onClick={createPageHandler(currentPage - 1)}
-            className={`${buttonBase} ${buttonCursor}`}
+          <a
+            href={buildHref(currentPage - 1, search)}
             aria-label="Previous page"
+            className={`${linkBase} ${linkCursor}`}
+            onClick={handleLinkClick(currentPage - 1)}
             {...readonlyProps}
           >
             <AiFillCaretLeft aria-hidden="true" />
-          </button>
+          </a>
         )}
       </div>
 
       <div className="flex gap-1 items-center">
         {pageRange.map((p) =>
           p === currentPage ? (
-            <button
+            <a
               key={`${currentPage}-${p}`}
               aria-current="page"
-              disabled
               tabIndex={-1}
               className="px-2 py-1 rounded bg-purple-950 text-white pointer-events-none cursor-not-allowed"
+              href={buildHref(p, search)}
             >
               {p}
-            </button>
+            </a>
           ) : (
-            <button
+            <a
               key={`${currentPage}-${p}`}
-              onClick={createPageHandler(p)}
+              href={buildHref(p, search)}
               aria-label={`Page ${p}`}
-              className={`${buttonBase} ${buttonCursor}`}
+              className={`${linkBase} ${linkCursor}`}
+              onClick={handleLinkClick(p)}
               {...readonlyProps}
             >
               {p}
-            </button>
+            </a>
           )
         )}
 
         {!pageRange.includes(totalPages) && (
           <span className="flex gap-2">
             <span aria-hidden="true">…</span>
-            <button
-              onClick={createPageHandler(totalPages)}
-              className={`${buttonBase} ${buttonCursor}`}
+            <a
+              href={buildHref(totalPages, search)}
+              className={`${linkBase} ${linkCursor}`}
               aria-label={`Page ${totalPages}`}
+              onClick={handleLinkClick(totalPages)}
               {...readonlyProps}
             >
               {totalPages}
-            </button>
+            </a>
           </span>
         )}
       </div>
 
       <div className="w-4 flex justify-end">
         {currentPage < totalPages && (
-          <button
-            onClick={createPageHandler(currentPage + 1)}
-            className={`${buttonBase} ${buttonCursor}`}
+          <a
+            href={buildHref(currentPage + 1, search)}
             aria-label="Next page"
+            className={`${linkBase} ${linkCursor}`}
+            onClick={handleLinkClick(currentPage + 1)}
             {...readonlyProps}
           >
             <AiFillCaretRight aria-hidden="true" />
-          </button>
+          </a>
         )}
       </div>
     </nav>

src/features/home/HomeSearchSection.tsx

@@ -56,19 +56,6 @@ export function HomeSearchSection({ initialSearch, initialPage }: Props) {
     enabled: !!params.search,
   });
 
-  useEffect(() => {
-    let title: string;
-    if (params.search) {
-      title =
-        params.page && params.page > 1
-          ? `Search: ${params.search} (Page ${params.page}) | Movie Search`
-          : `Search: ${params.search} | Movie Search`;
-    } else {
-      title = 'Movie Search';
-    }
-    document.title = title;
-  }, [params.search, params.page]);
-
   useEffect(() => {
     if (isSuccess && data) {
       lastTotalPagesRef.current = data.total_pages;
@@ -85,8 +72,15 @@ export function HomeSearchSection({ initialSearch, initialPage }: Props) {
 
   const handlePageChange = (page: number) => setParams({ page });
 
+  const title = params.search
+    ? params.page && params.page > 1
+      ? `Search: ${params.search} (Page ${params.page}) | Movie Search`
+      : `Search: ${params.search} | Movie Search`
+    : 'Movie Search';
+
   return (
     <section className="space-y-4">
+      <title>{title}</title>
       <h1 className="text-xl font-bold text-stone-800">Welcome to Movie Search</h1>
       <p className="text-stone-600">
         Use the search box to find your favorite movies. Results will appear below.
@@ -117,6 +111,7 @@ export function HomeSearchSection({ initialSearch, initialPage }: Props) {
         {showPaging && (
           <Pagination
             data-testid="pagination-top"
+            search={params.search}
             currentPage={currentPage}
             totalPages={totalPages}
             onPageChange={handlePageChange}
@@ -141,6 +136,7 @@ export function HomeSearchSection({ initialSearch, initialPage }: Props) {
       </div>
       {showPaging && (
         <Pagination
+          search={params.search}
           currentPage={currentPage}
           totalPages={totalPages}
           onPageChange={handlePageChange}

src/features/movies/MovieDetailsSection.tsx

@@ -26,6 +26,7 @@ export default function MovieDetailsSection({ movieId }: Props) {
 
   return (
     <section className="space-y-4">
+      <title>{`Search for movies: ${data.title}`}</title>
       <BackToSearchLink />
       <MovieDetailsView movie={data} />
     </section>