From dc4ddc0dcc6c2c15bca92eef7c1217c11a15e006 Mon Sep 17 00:00:00 2001
From: Shinyaigeek <Philispaxil@gmail.com>
Date: Sun, 20 Feb 2022 19:10:43 +0900
Subject: [PATCH 1/2] Chore: update basic-features/data-fetching/client-side

---
 .../data-fetching/client-side.md              | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 docs/basic-features/data-fetching/client-side.md

diff --git a/docs/basic-features/data-fetching/client-side.md b/docs/basic-features/data-fetching/client-side.md
new file mode 100644
index 00000000..1f855783
--- /dev/null
+++ b/docs/basic-features/data-fetching/client-side.md
@@ -0,0 +1,81 @@
+---
+description: 'Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more.'
+---
+
+# Client-side data fetching
+
+Client-side data fetching is useful when your page doesn't require SEO indexing, when you don't need to pre-render your data, or when the content of your pages needs to update frequently. Unlike the server-side rendering APIs, you can use client-side data fetching at the component level.
+
+If done at the page level, the data is fetched at runtime, and the content of the page is updated as the data changes. When used at the component level, the data is fetched at the time of the component mount, and the content of the component is updated as the data changes.
+
+It's important to note that using client-side data fetching can affect the performance of your application and the load speed of your pages. This is because the data fetching is done at the time of the component or pages mount, and the data is not cached.
+
+## Client-side data fetching with useEffect
+
+The following example shows how you can fetch data on the client side using the useEffect hook.
+
+```jsx
+function Profile() {
+  const [data, setData] = useState(null)
+  const [isLoading, setLoading] = useState(false)
+
+  useEffect(() => {
+    setLoading(true)
+    fetch('api/profile-data')
+      .then((res) => res.json())
+      .then((data) => {
+        setData(data)
+        setLoading(false)
+      })
+  }, [])
+
+  if (isLoading) return <p>Loading...</p>
+  if (!data) return <p>No profile data</p>
+
+  return (
+    <div>
+      <h1>{data.name}</h1>
+      <p>{data.bio}</p>
+    </div>
+  )
+}
+```
+
+## Client-side data fetching with SWR
+
+The team behind Next.js has created a React hook library for data fetching called [**SWR**](https://swr.vercel.app/). It is **highly recommended** if you are fetching data on the client-side. It handles caching, revalidation, focus tracking, refetching on intervals, and more.
+
+Using the same example as above, we can now use SWR to fetch the profile data. SWR will automatically cache the data for us and will revalidate the data if it becomes stale.
+
+For more information on using SWR, check out the [SWR docs](https://swr.vercel.app/docs/getting-started).
+
+```jsx
+import useSWR from 'swr'
+
+const fetcher = (...args) => fetch(...args).then((res) => res.json())
+
+function Profile() {
+  const { data, error } = useSWR('/api/profile-data', fetcher)
+
+  if (error) return <div>Failed to load</div>
+  if (!data) return <div>Loading...</div>
+
+  return (
+    <div>
+      <h1>{data.name}</h1>
+      <p>{data.bio}</p>
+    </div>
+  )
+}
+```
+
+## Related
+
+For more information on what to do next, we recommend the following sections:
+
+<div class="card">
+  <a href="/docs/routing/introduction.md">
+    <b>Routing:</b>
+    <small>Learn more about routing in Next.js.</small>
+  </a>
+</div>
\ No newline at end of file

From f2ee2891896409c84734185816170c06c97d2d2f Mon Sep 17 00:00:00 2001
From: Shinyaigeek <Philispaxil@gmail.com>
Date: Sun, 20 Feb 2022 19:45:36 +0900
Subject: [PATCH 2/2] Chore: update manifest.json

---
 docs/manifest.json | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/manifest.json b/docs/manifest.json
index 564787eb..1db31587 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -18,7 +18,12 @@
             },
             {
               "title": "データ取得",
-              "path": "/docs/basic-features/data-fetching.md"
+              "routes": [
+                {
+                  "title": "Client side",
+                  "path": "/docs/basic-features/data-fetching/client-side.md"
+                }
+              ]
             },
             {
               "title": "CSS のビルトインサポート",
@@ -427,4 +432,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}