React Router v7(フレームワーク利用) 実践ガイド：ブログサイトを作りながら学ぶサーバーサイド、クライアントサイドのレンダリング

import type { Config } from '@react-router/dev/config'

export default {
  // Config options...
  // Server-side render by default, to enable SPA mode set this to `false`
  ssr: true,
} satisfies Config

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
}

export const fetchPosts = async (): Promise<Post[]> => {
  console.log('fetch')
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  return await response.json()
}

const response = await fetch('https://jsonplaceholder.typicode.com/posts')

type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
}

  console.log('fetch')

- import { posts } from '~/const/posts'
import type { Route } from './+types/home'
import { Link } from 'react-router'
import { HomeNavigation } from '~/components/home-navigation'
+ import { fetchPosts } from '~/lib/data'

export function meta({}: Route.MetaArgs) {
  return [
    { title: 'New React Router App' },
    { name: 'description', content: 'Welcome to React Router!' },
  ]
}

+ export async function loader() {
+   const posts = await fetchPosts()
+   return posts
+ }

export default function Home({
+   loaderData,
+ }: Route.ComponentProps) {
+   const posts = loaderData;
  return (
    <>
      <HomeNavigation />
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link to={`/post/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </>
  )
}

export async function loader() {
  const posts = await fetchPosts()
  return posts
}

export default function Home({
  loaderData,
}: Route.ComponentProps) {
  const posts = loaderData;
  return (
    <>
      <HomeNavigation />
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link to={`/post/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </>
  )
}

+ const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

export const fetchPosts = async (): Promise<Post[]> => {
+ await sleep(3000)
  console.log('fetch')
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  return await response.json()
}

export const Spinner = () => {
  return (
    <div
      className="flex h-screen items-center justify-center"
      aria-label="読み込み中"
    >
      <div className="h-10 w-10 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
    </div>
  )
}

export const fetchPosts = (): Promise<Post[]> => {
  console.log('fetch')
  return new Promise((resolve) =>
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then((response) => response.json())
        .then((data) => resolve(data))
    }, 3000),
  )
}

+ import { Suspense } from 'react'
import type { Route } from './+types/home'
- import { Link } from 'react-router'
+ import { Await, Link } from 'react-router'
import { HomeNavigation } from '~/components/home-navigation'
import { fetchPosts } from '~/lib/data'
+ import { Spinner } from '~/components/spinner'

export function meta({}: Route.MetaArgs) {
  return [
    { title: 'New React Router App' },
    { name: 'description', content: 'Welcome to React Router!' },
  ]
}

export async function loader() {
- const posts = await fetchPosts()
+ const data = fetchPosts()
  return { data }
}

export default function Home({ loaderData }: Route.ComponentProps) {
  const { data } = loaderData

  return (
    <>
      <HomeNavigation />
+      <Suspense fallback={<Spinner />}>
+       <Await resolve={data}>
+         {(value) => {
+           return (
              <ul>
+               {value.map((post) => (
                  <li key={post.id}>
                    <Link to={`/post/${post.id}`}>{post.title}</Link>
                  </li>
                ))}
              </ul>
            )
+         }}
+       </Await>
+     </Suspense>
    </>
  )
}

export async function loader() {
  const data = fetchPosts()
  return { data }
}

      <Suspense fallback={<Spinner />}>
        <Await resolve={data}>
          {(value) => {
            return (
              <ul>
                {value.map((post) => (
                  <li key={post.id}>
                    <Link to={`/post/${post.id}`}>{post.title}</Link>
                  </li>
                ))}
              </ul>
            )
          }}
        </Await>
      </Suspense>

import type { Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;

- export async function loader() {
+ export async function clientLoader() {
  const data = fetchPosts()
  return { data }
}

+ export function HydrateFallback() {
+   return <div>Loading...</div>;
+ }

export default function Home({ loaderData }: Route.ComponentProps) {
  const { data } = loaderData

  return (
    <>
      <HomeNavigation />
      <Suspense fallback={<Spinner />}>
        <Await resolve={data}>
          {(value) => {
            return (
              <ul>

+ clientLoader.hydrate = true as const