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
 
@@ -186,6 +190,7 @@ I had limited time so here are a few other things I would look at..
 - Storybook for individual components - this would actually make working on the components a breeze.
 - Better display for small screens - I would love to put more time into this, I think the search page could be optimised quite nicely for smaller screens
   - You could even add additional image sizes to the api endpoint and use different image sizes for different media queries
+- Pagination component could be more SEO friendly
 - Optimise our endpoints but reducing the payload size - there is currently data we send to the frontend that isn't used
 - It's not the prettiest web app (I'm not really a designer) again with a bit more time it would be good to put more polish on it terms of looks
 - Add husky to get checks running on push

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/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.

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>