73 |
74 | Go Back
75 |
76 |
77 |
78 | Show Code
79 |
80 |
81 | {songs.map((song, i) => (
82 |
83 | ))}
84 |
85 | );
86 | }
87 | ```
88 |
89 | This is a powerful approach for efficient data management and optimized UI rendering. This technique is particularly valuable for applications with complex UI components, offering a seamless and responsive user experience.
90 |
91 | ## Client-side Fetching
92 |
93 | Next.js 14 not only excels in server-side data fetching but also provides robust client-side fetching capabilities. This section will illustrate how to effectively use client components in combination with SWR (Stale-While-Revalidate) for dynamic data handling. Unlike the server-side example, here the fetching process occurs directly within the client component.
94 |
95 | #### Setting Up the Client Component
96 |
97 | Our example utilizes a client component, which we clearly distinguish by placing a 'use client' directive at the top of the file. This directive signals Next.js to treat this component specifically for client-side operations.
98 |
99 | - **Dynamic Component Loading**: Similar to the server-side example, we employ Next.js's `dynamic` to load our client view. This dynamic loading is key in managing the rendering process based on the data availability.
100 |
101 | - **Integrating SWR**: The unique aspect of this client-side approach is the integration of SWR for fetching data. SWR is a strategy that first shows cached (stale) data, then updates it with fresh data from the server (revalidate). In our case, it calls the server action directly within the client component, handling data fetching and updating seamlessly.
102 |
103 | ```jsx
104 | 'use client';
105 | // ClientExampleView.tsx
106 |
107 | import React, { useState } from 'react';
108 | import Link from '@/components/Link';
109 | import BoxLoader from '@/components/BoxLoader';
110 | import SongCard from '@/components/SongCard';
111 | import GistView from '@/components/GistView';
112 |
113 | import useSwr from 'swr';
114 | import fetchSongs from '@/lib/server/fetchSongs';
115 |
116 | import { LuRefreshCcw } from 'react-icons/lu';
117 | import { BiCodeAlt } from 'react-icons/bi';
118 |
119 | export default function ClientExampleView() {
120 | const { data: songs, isLoading, isValidating, mutate } = useSwr('songs', fetchSongs);
121 | const [showCode, setShowCode] = useState(false);
122 |
123 | if (isLoading) {
124 | return ;
125 | }
126 |
127 | if (!songs) {
128 | return