DEV Community: VTeacher

The Vibe Design Wave, Continued 🌊 Claude Design Is Finally Here—Time to Graduate from Figma

VTeacher — Fri, 17 Apr 2026 18:45:46 +0000

About six months ago, I published an article.

The main point of that article was that “after Vibe Coding, the next wave seems to be Vibe Design” and that “more and more people are starting to ask whether AI can handle design work as well.” This article is a follow-up to that one—and now it’s starting to feel like this idea may actually become a reality.

Earlier today, Anthropic made a press announcement.

https://x.com/claudeai/status/2045156271251218897

In short, they announced “a new tool that lets you create designs and other visuals just by talking with Claude—even if you don’t have professional design expertise.”

Google had been drawing a lot of attention in the Vibe Design space with all the buzz around DESIGN.md, so people had already been speculating that Anthropic might be getting ready to reveal something too.

Claude Design

https://claude.ai/design

https://youtu.be/t_LBECIQQqs

What can it do?
- Create interactive prototypes
- Generate pitch decks and presentation materials
- Produce landing pages and marketing assets
- Automatically apply your team’s brand and design system
How does it work?
- Start from text, a file (DOCX/PPTX, etc.), or a URL
- Refine through conversation, inline comments, and direct editing
- Export to Canva, PDF, PPTX, or HTML
- Hand it off directly to Claude Code for implementation

In true Vibe Design fashion, you can even “send it straight to Claude Code for implementation.” But one of the most interesting points here may be how easily it integrates with native visual tools like Canva.

Trying it out

You can access it here.
It’s available to Pro, Max, Team, and Enterprise users.

https://claude.ai/design

(For convenience, I’m using screenshots translated into Japanese.)

As expected, it seems to be built around the idea of setting up a design system first.

Let’s go ahead and try editing the design system.

This part feels very Vibe Design-like: you can build a design system using natural language.
At the same time, it also supports existing design assets—you can provide things like a GitHub repository or a Figma .fig file as input.

For now, I decided to build one from natural language instead (I used my Zenn profile as the input).

Oh wow... it looks like it’s going to build something pretty substantial. Promising. Let’s wait and see.
(Just make sure not to forget to click the Generate button!)

Now we wait. Progress is shown on the left side.
Since the whole thing is constructed through natural language, it really does feel like Vibe Design in action.
It even looks like it generates a SKILL.md file at the end.

Done!

Using the design system

When you go back to the Home screen, the design system you created is now available to use, so let’s try it out.

Enter a project name and click the Create button.
This time, I’ll make a wireframe.

Let’s try creating a search screen.
My sketch is embarrassingly rough, but hopefully that won’t be a problem!
(It seems the sketch is included as part of the context.)

Along the way, it asks for clarification on anything ambiguous.

Finished!
Wow—even with such a rough sketch, it interpreted everything surprisingly well.

Sending it to Claude Code

Open Claude Code and paste the command into the prompt.

One thing to note: the URL included in this command has an expiration time.
If it expires, just repeat the same steps to get a new URL.

Now we wait.

Done!
It properly read the project contents and generated it as a JSX file.

Final thoughts

What I like most about this is how much more smoothly it connects to AI coding compared with Figma.
That alone feels like a strong enough reason to adopt Claude Design early.

React v19 Sample Code Examples

VTeacher — Tue, 25 Feb 2025 03:05:54 +0000

React 19 Sample Code

Regarding React 19, the RC version was announced in April 2024, and the stable version was released in December of the same year. Since more than two months have passed, it is no longer new, but I have compiled this article for organizational purposes.

Official Blog Post

Repository (GitHub)

I have prepared sample code based on Next.js (version 15).

GitHub Repository

Live Demo (Vercel)

The sample code has been deployed to Vercel, so feel free to check it out.

Vercel Deployment

Explanation of Sample Code

1. `useTransition`

💡 **Improvement in v19 → `isPending` is automatically set to `true` when `startTransition` begins.**

useTransition Documentation

useTransition was introduced in v18, but from v19, it now supports asynchronous functions within transitions, making it easier to handle pending states, errors, form submissions, and optimistic updates automatically.

Behavior:

When startTransition begins, isPending is automatically set to true.
When startTransition completes, isPending is automatically set to false.

This eliminates the need to manually manage the isPending state, resulting in cleaner asynchronous handling.

import { useRouter, usePathname } from "next/navigation";
import { useState, useTransition } from "react";

async function fetchSample(name: string | null): Promise<string> {
    return new Promise((resolve) => setTimeout(() => resolve('sample:' + name), 3000));
}

export default function Note() {
    const [isPending, startTransition] = useTransition();
    const [name, setName] = useState("");
    const [sample, setSample] = useState<string | null>(null);
    const router = useRouter();
    const pathname = usePathname();

    const handleSubmit = () => {
        startTransition(async () => { // 👈 isPending automatically becomes true
            const result = await fetchSample(name);
            if (result.includes("error")) {
                setSample(result);
                return;
            }
            router.push(pathname);
        }); // 👈 isPending automatically becomes false
    };

    return (
        <div className="m-2">
            <p className="text-xs text-gray-500 bg-white my-2">
                Calling `startTransition` alone sets `isPending` to `true`. This allows for a clean way to handle asynchronous operations. While this is a fundamental process, the following chapters will focus on form-specific optimizations, introducing even more concise and simplified approaches.
            </p>
            <input type="text" className="border p-2 rounded" value={name} placeholder="name" onChange={(e) => setName(e.target.value)} />
            <button onClick={handleSubmit} disabled={isPending} className="bg-blue-500 text-white p-2 rounded">
                {isPending ? "Pending..." : "Post"}
            </button>
            {sample && <p>{sample}</p>}
            {isPending && <span className="w-4 h-4 border-2 border-gray-300 border-t-transparent rounded-full animate-spin inline-block"></span>}
        </div>
    );
}

Live Demo:

Lesson 1: useTransition

2. `useActionState`

💡 A hook that consolidates standard form processing, making it much simpler. Likely to become a best practice.

useActionState Documentation

useActionState is a specialized hook for forms that simplifies common form handling (even more than useTransition). It is recommended to use useActionState as the first choice for form handling.

💡 In the Canary version, this was called `useFormState`, but it was renamed ([#28491](https://github.com/facebook/react/pull/28491)).

How to use `useActionState`

const [
    state,        // The state of the form, which stores the return value of formAction
    formAction,   // A wrapped function that is triggered when the form is submitted
    isPending     // A flag that indicates whether the form is being submitted
] = useActionState(
    fn,           // The logic inside formAction (server functions are supported)
    initialState, // Initial state of the form
    permalink?    // Optional, needed if fn is a server function
);

import { useActionState } from "react";

async function fetchSample(name: string | null): Promise<string> {
    return new Promise((resolve) => setTimeout(() => resolve(name ?? ""), 3000));
}

export default function Note() {
    const [message, submitAction, isPending] = useActionState<string | null, FormData>(
        async (_prevState: string | null, formData: FormData) => { 
            const resMessage = await fetchSample(formData.get("name") as string | null);
            return resMessage;
        },
        null
    );

    return (
        <form action={submitAction} className="m-2">
            <p className="text-xs text-gray-500 bg-white my-2">
                This hook simplifies standard form processing. Using `useActionState` makes form handling much cleaner and more concise.
            </p>
            <input type="text" className="border p-2 rounded" name="name" placeholder="name" />
            <button type="submit" disabled={isPending} className="bg-blue-500 text-white p-2 rounded">
                {isPending ? "Pending..." : "Post"}
            </button>
            {isPending && <span className="w-4 h-4 border-2 border-gray-300 border-t-transparent rounded-full animate-spin inline-block"></span>}
            {message && <p>{message}</p>}
        </form>
    );
}

💡 Using `useActionState` with server functions allows the form response to be displayed even if the form is submitted before hydration is complete. If using a server function, check the official documentation for permalink settings.

Live Demo:

Lesson 2: useActionState

3. `<form>` Action

💡 You can pass a custom function to the `<form>` action. Consider this if `useActionState` is not used.

Form Actions Documentation

As already seen in the useActionState example, a function can be passed to the <form> action.

<form action={actionFunction}>

This is not limited to useActionState; you can pass any custom-defined function. The form values can be accessed via formData. This approach is useful when the standard useActionState template is not sufficient.

import { useState } from "react";

async function fetchSample(name: string | null): Promise<string> {
    return new Promise((resolve) => setTimeout(() => resolve(name ?? ""), 3000));
}

export default function Note() {
    const [message, setMessage] = useState("");

    // Function to be passed to <form> action
    async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        const resMessage = await fetchSample(formData.get("name") as string);
        setMessage(resMessage);
    }

    return (
        <form onSubmit={handleSubmit} className="m-2">
            <p className="text-xs text-gray-500 bg-white my-2">
                This method connects custom functions with a form. Form values can be accessed via `formData`. It is useful when `useActionState` cannot handle a case or when standard processing is not sufficient.
            </p>
            <input type="text" className="border p-2 rounded" name="name" placeholder="name" required />
            <button type="submit" className="bg-blue-500 text-white p-2 rounded">
                Post
            </button>
            <p>{message}</p>
        </form>
    );
}

Live Demo:

Lesson 3: Form Enhancements

4. `useFormStatus`

💡 Retrieve `<form>` progress status within child components without prop drilling.

useFormStatus Documentation

This hook is designed with UI design and component structuring in mind. Instead of prop drilling isPending through multiple levels, useFormStatus allows child components to retrieve the form status directly.

import { useFormStatus } from "react-dom";

async function fetchSample(name: string | null): Promise<string> {
    return new Promise((resolve) => setTimeout(() => resolve(name ?? ""), 3000));
}

// 👇 Retrieve `<form>` status inside a child component
function SubmitButton() {
    const { pending } = useFormStatus();
    return <button type="submit" disabled={pending} className="bg-blue-500 text-white p-2 rounded">{pending ? "Posting..." : "Post"}</button>;
}

export default function Note() {
    async function handleSubmit(formData: FormData) {
        const name = formData.get("name") as string | null;
        await fetchSample(name);
    }

    return (
        <form action={handleSubmit} className="m-2">
            <p className="text-xs text-gray-500 bg-white my-2">
                You can retrieve the form state within a child component. There is no need to pass props like `isPending`.
            </p>
            <input type="text" className="border p-2 rounded" name="name" placeholder="name" required />
            <SubmitButton />
        </form>
    );
}

Live Demo:

Lesson 4: useFormStatus

5. `useOptimistic`

💡 Quickly set "temporary display values" during asynchronous processing.

useOptimistic Documentation

This hook allows setting a temporary optimistic value while waiting for an asynchronous process to complete. It renders even faster than useState.

import { useOptimistic, startTransition } from "react";
import { useState } from "react";

async function fetchSample(name: string | null): Promise<string> {
    return new Promise((resolve) => setTimeout(() => resolve(name ?? ""), 3000));
}

export default function Note() {
    const [name, setName] = useState<string | null>(null);
    const [optimisticName, setOptimisticName] = useOptimistic<string | null>(name);

    async function handleUpdate() {
        startTransition(async () => {
            setOptimisticName("■■■"); // 👈 Updates faster than `setName()`
            const result = await fetchSample("Bob");
            setName(result);
        });
    }

    return (
        <div className="m-2">
            <p className="text-xs text-gray-500 bg-white my-2">
                You can instantly display values you want to show for now (optimistic updates). It renders even faster than the timing of `useState`.
            </p>
            <button onClick={handleUpdate} className="bg-blue-500 text-white p-2 rounded">
                Show Name
            </button>
            <p className="mt-2">{optimisticName}</p>
        </div>
    );
}

Live Demo:

Lesson 5: useOptimistic

6. `use`

💡 A simple function-like hook. Works like `useMessage` when calling `use(message)`. It only fetches values during rendering.

use Documentation

Similar to hooks, use can only be called during rendering. Unlike some hooks, use can be used inside conditional branches.

A common misconception is that use is an alternative to await, but use works only during rendering.

"use client";

import { Suspense, use } from "react";

function Message({ messagePromise }: { messagePromise: Promise<string> }) {
    const message = use(messagePromise);
    return <p>Here is the message: {message}</p>;
}

export default function Note({ messagePromise }: { messagePromise: Promise<string> }) {
    return (
        <div className="m-2">
            <p className="text-xs text-gray-500 bg-white my-2">
                Normally, `fetch` is used in server components, but using `await` here blocks rendering and prevents effective use of `Suspense`. However, with the introduction of `use`, passing a `Promise` directly to a client component has become a smart solution, making it easier to control loading states using `Suspense`.
            </p>
            <Suspense fallback={<p>Waiting for message...</p>}>
                <Message messagePromise={messagePromise} />
            </Suspense>
        </div>
    );
}

Live Demo:

Lesson 6: use Hook

7. `useActionState` and `useOptimistic`

An example that combines useActionState and setOptimisticName.

import { useActionState, useOptimistic, useState } from "react";

async function fetchSample(name: string | null): Promise<string> {
    return new Promise((resolve) => setTimeout(() => resolve(name ?? ""), 3000));
}

export default function Note() {
    const [name, setName] = useState("");
    const [optimisticName, setOptimisticName] = useOptimistic<string | null>("");

    const [error, submitAction, isPending] = useActionState<string | null, FormData>(
        async (_prevState: string | null, formData: FormData) => {
            const newName = formData.get("name") as string | null;
            if (newName === '') {
                return "Error: required";
            }
            setOptimisticName(newName);
            await fetchSample(newName);
            setName(newName ?? "");
            return null;
        },
        null
    );

    return (
        <form action={submitAction} className="m-2">
            <p className="text-xs text-gray-500 bg-white my-2">
                An example combining `useActionState` and `setOptimisticName`.
            </p>
            <p className="mt-2">Name: {optimisticName || name}</p>
            <input type="text" name="name" placeholder="name" className="border p-2 mb-2 rounded" />
            <button type="submit" disabled={isPending} className="bg-blue-500 text-white p-2 rounded">
                {isPending && <span className="w-4 h-4 border-2 border-gray-300 border-t-transparent rounded-full animate-spin inline-block" />}
                Post
            </button>
            {error && <p className="text-red-500">{error}</p>}
        </form>
    );
}

Live Demo:

Lesson 7: useActionState and useOptimistic

8. React Server Components

💡 Server Components have been widely discussed, but they are officially introduced as a new component type in React 19. Unlike SSR, they are rendered ahead of time before bundling.

React Server Components Documentation

By default, components are Server Components. Check that users is not included in the source code. In Chrome, right-click and select "Inspect" to verify the source. Look at the file:

http://localhost:3000/_next/static/chunks/app/lesson08-react-server-components/page.js.

If you add "use client", the users data will be included, exposing private information such as suzuki@example.com.

// "use client"; // Note: Adding this makes it a Client Component.

const users = [
    {
        id: "1",
        name: "Suzuki",
        email: "suzuki@example.com",
    },
    {
        id: "2",
        name: "Satou",
        email: "tanaka@example.com",
    },
];

export default function Page() {
    return (
        <div className="text-center m-2">
            <p className="text-xs text-gray-500 bg-white my-2">
                By default, this is a Server Component. Check that `users` is not included in the source code. In Chrome, right-click and inspect the file at:
                `http://localhost:3000/_next/static/chunks/app/lesson08-react-server-components/page.js`. If `"use client"` is added, the `users` data will be included, exposing private information.
            </p>
            <h1>This is server side.</h1>
            <p>users: {users.length}</p>
        </div>
    );
}

Reference: Features included in the React Team's Full Stack Architecture Vision Official Documentation

Live Demo:

Lesson 8: React Server Components

9. Server Functions

💡 Define functions that execute only on the server.  
(Up until September 2024, all server functions were called ServerActions.)

Server Functions Documentation

This allows calling functions that can only execute on the server from UI events.

The following example displays the server uptime when a button is clicked.

"use server";

import { exec } from "child_process";
import { promisify } from "util";

const stat = promisify(exec) as (command: string) => Promise<{ stdout: string; stderr: string }>;

export async function action(): Promise<string> {
    const { stdout } = await stat("uptime");
    return stdout.trim();
}

"use client";

import { action } from "../actions";

export default function Note() {
    async function handleClick() {
        const stat = await action();
        alert(stat);
    }

    return (
        <div className="m-2">
            <p className="text-xs text-gray-500 bg-white my-2">
                You can call functions that execute only on the server from events like clicks. When you click the button, the server uptime will be displayed.
            </p>
            <button onClick={handleClick} className="bg-blue-500 text-white p-2 rounded">
                Server Action
            </button>
        </div>
    );
}

Live Demo:

Lesson 9: Server Functions

10. `ref` via Props

Ref as a Prop Documentation

One of the improvements in React 19 is that refs can now be accessed as props.

(This means forwardRef may become deprecated in the future.)

"use client";

import { useRef, forwardRef } from "react";

const ChildInputPropRef = ({ placeholder, ref }: { placeholder: string, ref: React.Ref<HTMLInputElement> }) => (
    <input ref={ref} type="text" placeholder={placeholder} className="border p-2 rounded" />
);

const ChildInputForwardRef = forwardRef<HTMLInputElement, { placeholder: string }>(
    ({ placeholder }, ref) => (
        <input ref={ref} type="text" placeholder={placeholder} className="border p-2 rounded" />
    )
);

ChildInputForwardRef.displayName = "ChildInputForwardRef";

export default function Note() {
    const inputForwardRef = useRef<HTMLInputElement>(null);
    const inputPropRef = useRef<HTMLInputElement>(null);

    return (
        <div className="flex flex-col items-center gap-4 p-4 m-2">
            <p className="text-xs text-gray-500 bg-white my-2">
                One of the improvements in React 19 is that refs can be accessed as props. `forwardRef` is no longer needed.
            </p>
            <input type="text" placeholder="Normal" className="border p-2 rounded" />
            <ChildInputForwardRef placeholder="ForwardRef" ref={inputForwardRef} />
            <ChildInputPropRef placeholder="PropRef" ref={inputPropRef} />
            <button
                onClick={() => inputForwardRef.current?.focus()}
                className="bg-blue-500 text-white p-2 m-2 rounded"
            >
                ForwardRef focus()
            </button>
            <button
                onClick={() => inputPropRef.current?.focus()}
                className="bg-blue-500 text-white p-2 m-2 rounded"
            >
                PropRef focus()
            </button>
        </div>
    );
}

Another improvement is that refs now support cleanup similar to useEffect:

<input
  ref={(ref) => {
    // Ref created

    // NEW: Return a cleanup function to reset
    // the ref when the element is removed from the DOM.
    return () => {
      // Ref cleanup
    };
  }}
/>

Live Demo:

Lesson 10: Ref via Props

Wow! How to easily introduce GlobalState with AppRouter (RSC) and share the state across SC, CC, and ServerActions.

VTeacher — Sat, 03 Feb 2024 02:38:06 +0000

Hi,

I'm a front-end engineer and a back-end engineer.
I like choosing a combination of classic technology and slightly geeky technology.

More and more companies are adopting Next.js AppRouter (React Server Components)!
This time, we will introduce a method that we use at our company to share state across the server components (SC), client components (CC), and ServerActions!

In this way, we assume that you want to share the state from a client component at the end of one branch to a server component at another branch in an AppRouter (RSC) environment.
This is when you want to avoid a bucket brigade (chain of handoff from parent to child).

(Still... I'm a bucket brigade advocate...)

Introduction

There is a starter template for Next.js provided by Vercel.

Next.js starter templates and themes
Discover Next.js templates, starters, and themes to jumpstart your application or website build.

https://vercel.com/templates/next.js

It's convenient 😳

This includes a demo that implements a chat UI similar to ChatGPT.
This time, we will introduce a global state to it (nextjs-ai-chatbot).

Next.js AI Chatbot
A full-featured, hackable Next.js AI chatbot built by Vercel

https://vercel.com/templates/next.js/nextjs-ai-chatbot

The skill sets and functions are as follows, and include the minimum elements necessary for general service development.
NextAuth.js is used for the sign-in/sign-out function.

- Next.js App Router
- React Server Components (RSCs), Suspense, and Server Actions
- Vercel AI SDK for streaming chat UI
- Support for OpenAI (default), Anthropic, Cohere, Hugging Face, or custom AI chat models and/or LangChain
-shadcn/ui
   - Styling with Tailwind CSS
   - Radix UI for headless component primitives
   - Icons from Phosphor Icons
- Chat History, rate limiting, and session storage with Vercel KV
- NextAuth.js for authentication

Also, this is provided by the team at Vercel. In other words, it is the implementation code of the original people!

This library is created by Vercel and Next.js team members, with contributions from:
Jared Palmer (@jaredpalmer) - Vercel
Shu Ding (@shuding_) - Vercel
shadcn (@shadcn) - Vercel

local environment

Repository

https://github.com/vercel/ai-chatbot

Please import it using git clone or Fork.

Environment variables (.env)

If you want to see the code and actually see it working, you'll need a key to OpenAI and Vercel KV (free plan is fine). You will also need a GitHub account for the sign-in feature.

Create a .env file by copying .env.example.

GitHub https://github.com/settings/applications/2435178
OpenAI https://platform.openai.com/
Vercel https://vercel.com/storage/kv

*AUTH_SECRET is the value displayed when accessing https://generate-secret.vercel.app/32.

boot

Prepare the Node.js environment and install it.

*For pnpm

pnpm install

pnpm dev

open

http://localhost:3000/

You can sign in with your GitHub account. If you successfully sign in, the following screen will appear.

Enter your question in the text field labeled Send a message, click the Send button, and watch the OpenAI API reply back.

If you want to change the Large-Scale Language Model (LLM)

It is written to use gpt-3.5-turbo, so if you want to change to 4 series, rewrite app/api/chat/route.ts.

   const res = await openai.chat.completions.create({
     // model: 'gpt-3.5-turbo',
     // model: 'gpt-4',
     model: 'gpt-4-turbo-preview',
     messages,
     Temperature: 0.7,
     stream: true
   })

*OpenAI API is a billing system, so please check the usage status on the Administration screen.

Folder structure

The folder structure of nextjs-ai-chatbot is as follows.

Project
├── app
│ ├── (chat)
│ │ ├── [id]
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── layout.tsx
│ └── actions.ts '<--------- * Server Actions (use server)'
│
├── components '<------------ Component storage area'
│ ├── chat.tsx '<--------- * Client Component (use client)'
│ ├── sidebar-list.tsx '<-- * Server Component'
│ └── prompt-form.tsx '<--- * Client Component (unmarked)'
│
├── lib
│ └── hooks '<------------- Custom hook storage area'
├── middleware.ts
└── public '<---------------- Resource file storage area'

Although it is not directly related to this demo, you will want to take advantage of middleware, which is very convenient when using Vercel.
By the way, regarding the part marked "unmarked", even if use client is not explicitly stated, the caller (ancestor) is a client.

side, the code effectively functions as a ClientComponent as well. If you are not planning on using it like SharedComponent, it is better to clearly write use client at the beginning.

Introduce global state

Will begin the main subject. Let's introduce global state to a project configured with this RSC (Next.js AppRouter).

Due to the nature of RSC, traditional global state management strategies such as Recoil cannot be applied. Therefore, it is necessary to use a global state management library specialized for RSC.
This time, we will use nrstate to implement a global state.

https://www.npmjs.com/package/nrstate

nrstate represents the following elements
-N:Next.js

R: React Server Components
State: State management

This is a global state management library specialized for Next.js' AppRouter.

Install nrstate

*For pnpm

pnpm install nrstate --save-dev

pnpm install nrstate-client --save-dev

Determine the state of the entire page

nrstate has a concept called PageState. This means considering the state of the entire page. This allows you to retrieve state across components even if the page is made up of multiple components.

In nextjs-ai-chatbot, I think it is appropriate to treat the only value input by the user (message) as a global state, so I will use this as PageState.

Official site
- https://www.npmjs.com/package/nrstate
points
- Establish global state considering the entire page (applies across multiple components).
- Setting (setting) global state is only possible on the client side.
- Global state can be retrieved on the client side or server side.
- Refresh processing is done automatically.
- The basic principle of RSC is that it starts with the server component.

Now let's implement it.

Create PageState

Define PageState by creating a file like this:

app/PageStateChat.tsx (*Create a new one)

export type PageStateChat = {
     message: string
}

export const initialPageStateChat = {
     message:''
} satisfies PageStateChat

export const pathChat = '/'

PageStateChat defines the type of this PageState.
initialPageStateChat specifies the default value.
pathChat indicates the target path, and this time it is set to the root (/). This allows PageState to be referenced everywhere under the root.

Implement a provider for PageState.

Since there is no page.tsx in the root of nextjs-ai-chatbot, implement PageStateProvider in layout.tsx as an alternative.

Be sure to implement PageStateProvider in a server component (I think page.tsx and layout.tsx are usually made into server components, so I don't think there will be any problems...)
app/layout.tsx

import.

import { currentPageState } from 'nrstate/PageStateServer'
import PageStateProvider from 'nrstate-client/PageStateProvider'
import {
   PageStateChat,
   initialPageStateChat,
   pathChat
} from '@/app/PageStateChat'

For render, just surround the existing code with PageStateProvider.

export default function RootLayout({ children }: RootLayoutProps) {
   return (

     <PageStateProvider
       current={currentPageState<PageStateChat>(initialPageStateChat, pathChat)}
     >
       <html lang="en" suppressHydrationWarning>
         ...(omitted)...
       </html>
     </PageStateProvider>

   )
}

This completes the setup. It's easy.

Set the value for PageState

The area under components is where general-purpose components are placed, but this time we will modify it for convenience.

ClientComponent

PageState can only be set from client components (CC).
Update PageState using the change event of the defined global state message.

components/prompt-form.tsx

prompt-form.tsx does not have use client written at the beginning, but its caller (ancestor) is a client component (CC), so it is running as a client component.

Import PageState.

import { usePageState } from 'nrstate-client/PageStateClient'
import { PageStateChat, pathChat } from '@/app/PageStateChat'

Use the PageState hook.

export function PromptForm({...(omitted)...}) {
   const [pageState, setPageState] = usePageState<PageStateChat>()

   ...(omitted)...
}

After inputting, when you click the submit button (onSubmit event), update PageState using the input value (input).

     <form
       onSubmit={async e => {
         ...(omitted)...

         setPageState(
           {
             ...pageState,
             message: input
           },
           pathChat
         )

...(omitted)...

Get value from PageState

ClientComponent

components/chat.tsx

Import PageState.

import { usePageState } from 'nrstate-client/PageStateClient'
import { PageStateChat, pathChat } from '@/app/PageStateChat'

You can get the PageState (message) using the PageState hook.

export function Chat(...(omitted)...) {

   const [pageState] = usePageState<PageStateChat>()
   const { message } = pageState

   ...(omitted)...
}

Let's display the global state on the screen for debugging.

<p className="text-sm text-blue-500">
   ClientComponent(use client): message={message}
</p>

ServerComponent

Next is the server side.
The value of nrstate can only be changed on the client side, and the value can only be referenced on the server side.

components/sidebar-list.tsx

Import PageState.
*On the server side, use getPageState.

import { getPageState } from 'nrstate/PageStateServer'
import {
   PageStateChat,
   initialPageStateChat,
   pathChat
} from '@/app/PageStateChat'

Get the PageState using the PageState hook.

export async function SidebarList(...(omitted)...) {

   const pageState = getPageState<PageStateChat>(initialPageStateChat, pathChat)
   const { message } = pageState

   console.log('ServerComponent', message)
   ...(omitted)...
}

Displays PageState on screen for debugging.

<p className="text-sm text-orange-500">
   ServerComponent message={message}
</p>

ServerActions

ServerActions is also a server-side function, so we treat it in a similar way to server components (SCs).

app/actions.ts

Import PageState.
On the server side, use getPageState.

import { getPageState } from 'nrstate/PageStateServer'
import {
   PageStateChat,
   initialPageStateChat,
   pathChat
} from '@/app/PageStateChat'

Get the PageState using the PageState hook.

export async function removeChat(...(omitted)...) {

   const pageState = getPageState<PageStateChat>(initialPageStateChat, pathChat)
   const { message } = pageState

   console.log('ServerActions(use server) message=', message)
   ...(omitted)...

*There is an original bug in nextjs-ai-chatbot on line 66, so please fix it as follows.

   if (String(uid) !== session?.user?.id) {
     ...(omitted)...
   }

Explicitly remove PageState

If you want to explicitly remove PageState, do the following:
(possible with client component)

import { clearPageState } from 'nrstate-client/PageStateClient'
import { pathChat } from '@/app/demo/PageStateChat'

clearPageState(pathChat)

Operation confirmation

Now, let's try out the chat function!

As shown in the following video, the global state (value of PageState) can be shared across server components, client components, and ServerActions.

https://www.youtube.com/watch?v=Lzyxijqf6Ik

*For cases where debug information cannot be displayed on the screen, mainly server-side logs, please check from the terminal.

lastly

Here is the current repository.

https://github.com/vteacher-online/ai-chatbot

Wow! Server Actions are now Stable from Next.js 14! Dramatic changes in React and Next's form

VTeacher — Fri, 27 Oct 2023 22:40:34 +0000

I am Satoko, a member of VTeacher.

I am a front-end engineer and back-end engineer at the same time.
I love to select a combination of classic and slightly geeky technologies!

Next.js Conf

Today (midnight to morning Japan time), Next.js Conf was held!

https://www.youtube.com/live/8q2q_820Sx4?t=5485

Next.js 14 was announced at this time and Server Actions are now officially Stable!

https://x.com/nextjs/status/1717596665690091542

I see that Clerks are also being used as usual.

https://x.com/dan_abramov/status/1717652653570736469

What is Server Actions?

About half a year ago, Server Actions (alpha version) was announced on the 4th day of Vercel Ship.

https://youtu.be/M4vrwI5PDI0?t=880

The mystery of "use server" that had been circulating on SNS was solved, and I got the impression that the reaction was great, in both good and bad ways.

A discussion of the direction React/Next is heading

Server Actions, but there are some critical opinions.

"(Back to PHP?)"

https://x.com/levelsio/status/1654053489004417026

This is my theory that I have been preaching since the alpha version...,

In a way, I feel it is similar to after React Server Components was announced by Facebook (now Meta), and I think it is a re-heat because it has become more realistic with the appearance of Server Actions 🤔.

Reacet Server Components ... RSC for short.
RSC was announced by Meta (formerly Facebook) at the end of 2020 and has since been working on the project with Vercel.

https://beta.nextjs.org/docs/rendering/server-and-client-components

What is the RSC, after all?

First of all, but first, here is my impression of Meta's front-end team.
Perhaps because Facebook (https://facebook.com/) was originally built with PHP, I have the impression that even though they are in charge of the front-end, they also have the perspective of a back-end engineer and place a lot of emphasis on performance. I have the impression that they are very performance oriented.

https://www.youtube.com/watch?v=8pDqJVdNa44

Historically, the following history and challenges have been involved,
(in chronological order from 1 to 2 to 3)

use PHP (server-side rendering) to build the client side
let's make the client side in JavaScript (React)
Let's make JavaScript (React) render on the server side like PHP

I had issues with all of them,
This time, we are trying to make it possible to select either server-side rendering or client-side rendering for each component. This is the challenge.
That is the understanding of Reacet Server Components (RSC).

I have the impression that Meta is consistently focusing on the following.

Usability (native apps vs. HTML5 as in the past)
Performance (especially in terms of display speed)
Productivity (ecosystem development)

None of these are special, and in a sense, my impression is that they are quietly doing "normal" things.
(Only the scale is different).

But this is where the discussion heats up, mainly because of the passion from the users.

Is it really cool?
Isn't it going against the times?
Is it not good enough as it is now?

This time, the heated discussion occurred in Server Actions.

The opening "(revert back to PHP?)" is,
I personally think it is hard to say 🤔.
However, it may result in the impression that "(back to PHP, right?)".

I think there is no doubt that this is a turning point.
(If it is a turning point, it may be long past 😅)

Server Actions Overview

Until now, it was necessary to prepare APIs for extracting, registering, updating, and deleting form data. However, with the advent of Server Actions, the hassles of the past have been eliminated, and form data can now be handled within the server component. The way to handle form data will change dramatically.

Point.

The 'use server' in the function is a key point when using Server Actions.

You can also import and use Server Actions functions.

// 'use server';

export async function create(formData: FormData) {
  'use server';
  console.log(formData);
}

Server Actions can be used in both server and client components (see below).

Forgetting to include 'use server' will result in an error.

Since the server component is processed on the server side, DB operations (ORM) are also an option. I personally am a big fan of the fact that form data on the client side can be easily handled on the server side!

https://x.com/dan_abramov/status/1654132342313701378

For more specific Server Actions, please see below!

What we tried to make

This is what our engineers have tried to make.

Next 14.0.0
nrstate (state management)
Server Actions
Zod (Validation)

https://nrstate-demo.vercel.app/demo/

*If you are viewing on a smartphone, please remove the orientation lock 🔐 and view it in landscape mode!

Code. https://github.com/vteacher-online/nrstate-demo/

Documents

Release details
https://nextjs.org/blog/next-14#server-actions-stable
Documents
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
Related Pull Requests
https://github.com/facebook/react/pull/26774

Try it out

To try it out, install Next.js 14 (the latest version is now available on npm).

Here is the code our engineers tried.

Repository https://github.com/vteacher-online/nrstate-demo/

# Install dependencies:
pnpm install

# Start the dev server:
pnpm dev

Case 1: The simplest Server Actions

Render a <form> in the server component.
Write a function (=Server Actions) that is associated with the action of <form>.
Write 'use server' in the function of Server Actions.

It may be true for SPA in general, but until now it has been difficult to write Mutate-type processes (registration, update, deletion, etc.) in a clean and simple manner.
We always had to prepare an API, handle onClick on the client, payload the form data, and send it to the server.

With the advent of Server Actions, this processing method has changed dramatically.
It enjoys the characteristics of a server component and can be written in an intuitive manner.

// ...

export default async function B() {

  // ...

  async function fServerAction(formData: FormData) {
    'use server';

    console.log(formData);
  }

  return (
    <ul>
      {examples.map(
        ({ id, name }: { id: string; name: string; }) => (
          <li key={id}>
            {/* @ts-expect-error Async Server Component */}
            <form action={fServerAction}>
              <input type="text" name="id" defaultValue={id} />
              <input type="text" name="name" defaultValue={name} />
              <button type="submit">
                Try Server Actions
              </button>
            </form>
          </li>
        ),
      )}
    </ul>
  );
}

Case2: Server Actions using formAction

Additionally, the following elements allow you to use Server Actions using formAction.

<button>
<input type="submit" ...>
<input type="image" ...>

React did not support the formAction attribute, but it is now possible to pass it.

In this case, even if Server Actions are written in <form action= ...>, they will not be called.
This will take precedence.

export default async function B() {

// ... 

  async function fServerAction(formData: FormData) {
    'use server';

    console.log('--- fServerAction ---');
    console.log(formData);
  }

  async function fServerActionWithFormAction(formData: FormData) {
    'use server';

    console.log('--- fServerActionWithFormAction ---');
    console.log(formData);
  }

  return (
    <>
      {examples.map(
        ({ id, name, pos }: { id: string; name: string; pos: string }) => (
          <p key={id} className="m-5">
            {/* @ts-expect-error Async Server Component */}
            <form action={fServerAction}>
              <input type="text" name="id" defaultValue={id} />
              <input type="text" name="name" defaultValue={name} />
              <input type="text" name="pos" defaultValue={pos} />
              <button
                type="submit"
                className="w-1/12 rounded bg-blue-500 p-2 font-bold text-white hover:bg-blue-700 "
                formAction={fServerActionWithFormAction}
              >
                Mutate
              </button>
            </form>
          </p>
        ),
      )}
    </>
  );
}

Case3: Call Server Actions from client component

I thought Server Actions was a function only for server components, but it turns out that it can also be called from client components.

This looks like it's going to change dramatically.
It seems like his client OR server can be realized in component units.

Server Actions
- _action.tsx

'use server';

export async function fServerActionFromAnywhere(formData: FormData) {
  // 'use server'; 

  console.log('--- fServerAction ---');
  console.log(formData);
}

export async function fServerActionWithFormActionFromAnywhere(formData: FormData) {
  // 'use server'; 

  console.log('--- fServerActionWithFormAction ---');
  console.log(formData);
}

Client component
- B.client.tsx

'use client';

// ...

import {
  fServerActionFromAnywhere,
  fServerActionWithFormActionFromAnywhere,
} from './_action';

export default function B({ children }: { children: React.ReactNode }) {

  // ...

  const { a, d } = pageState;

  // ...

  return (
    <div>
      <form name="fServerAction" action={fServerActionFromAnywhere}>
        <input type="hidden" name="a" defaultValue={a} />
        <input type="hidden" name="d" defaultValue={d} />
        <button
          type="submit"
        >
          ServerAction
        </button>
      </form>
      <form name="fServerActionWithFormAction">
        <input type="hidden" name="a" defaultValue={a} />
        <input type="hidden" name="d" defaultValue={d} />
        <button
          type="submit"
          formAction={fServerActionWithFormActionFromAnywhere}
        >
          with formAction
        </button>
      </form>
      <div>{children}</div>
    </div>
  );
}

The following logs are generated on the server side.

--- fServerAction ---
FormData {
  [Symbol(state)]: [
    { name: 'a', value: '' },
    { name: 'd', value: 'asc' },
    { name: 'd', value: 'asc' }
  ]
}

--- fServerActionWithFormAction ---
FormData {
  [Symbol(state)]: [ { name: 'a', value: '' }, { name: 'd', value: 'asc' } ]
}

Case4: Getting a value from `Page({ params })`.

Incidentally, the Server Actions seem to be performed on the server side again, with automatic implicit state transitions (reloading).
(For this reason, you may see some samples that use it in combination with router.refresh().)

The reason for this is a feature of RSC, as described in the following.

For now, you must re-render the entire React tree from the root server component
For now, you must re-render the entire React tree from the root server component.
https://www.plasmic.app/blog/how-react-server-components-work

With this relationship, Server Actions can get values from Page({ params }), as in the following example.

app/demo/[id]/like-button.tsx

'use client';

export default function LikeButton({ increment }: { increment: () => void }) {
  return (
    <button
      onClick={async () => {
        await increment();
      }}
    >
      Like
    </button>
  );
}

app/demo/[id]/page.tsx

import LikeButton from './like-button';

import type { ReadonlyURLSearchParams } from 'next/navigation';
export type PageProps = {
  params: {};
  searchParams: ReadonlyURLSearchParams & {
    location: string;
  };
};

export default async function Page(pageProps: PageProps) {
  async function increment() { // Server Actions
    'use server';
    console.log(pageProps);
  }

  return (
    <>
      <LikeButton increment={increment} />
    </>
  );
}

Access it at the following URL and click the Like button that appears on the screen,

http://localhost:3000/demo/123?location=456

You will see the following log on the server side

{ params: { id: '123' }, searchParams: { location: '456' }

Validation: Checking form values

You may want to rely on the Validation libraries you have been using, such as react-hook-form or Zod.

The official documentation shows how to do the following (Zod example).

Forms and Mutations https://github.com/vercel/next.js/tree/canary/examples/next-forms

'use client'

import { experimental_useFormState as useFormState } from 'react-dom'
import { useFormStatus } from 'react-dom'
import { createTodo } from '@/app/actions'

const initialState = {
  message: null,
}

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button type="submit" aria-disabled={pending}>
      Add
    </button>
  )
}

export function AddForm() {
  const [state, formAction] = useFormState(createTodo, initialState)

  return (
    <form action={formAction}>
      <label htmlFor="todo">Enter Task</label>
      <input type="text" id="todo" name="todo" required />
      <SubmitButton />
      <p aria-live="polite" className="sr-only" role="status">
        {state?.message}
      </p>
    </form>
  )
}

'use server'

import { revalidatePath } from 'next/cache'
import { sql } from '@vercel/postgres'
import { z } from 'zod'

// CREATE TABLE todos (
//   id SERIAL PRIMARY KEY,
//   text TEXT NOT NULL
// );

export async function createTodo(prevState: any, formData: FormData) {
  const schema = z.object({
    todo: z.string().min(1),
  })
  const data = schema.parse({
    todo: formData.get('todo'),
  })

  try {
    await sql`
    INSERT INTO todos (text)
    VALUES (${data.todo})
  `

    revalidatePath('/')
    return { message: `Added todo ${data.todo}` }
  } catch (e) {
    return { message: 'Failed to create todo' }
  }
}

export async function deleteTodo(prevState: any, formData: FormData) {
  const schema = z.object({
    id: z.string().min(1),
    todo: z.string().min(1),
  })
  const data = schema.parse({
    id: formData.get('id'),
    todo: formData.get('todo'),
  })

  try {
    await sql`
      DELETE FROM todos
      WHERE id = ${data.id};
    `

    revalidatePath('/')
    return { message: `Deleted todo ${data.todo}` }
  } catch (e) {
    return { message: 'Failed to delete todo' }
  }
}

The method introduced in Case 3 can also be used to call Server Actions from the client component (Zod example).

Server Actions
- app/demo/server-actions/serverActionG.tsx

'use server';

// ...

export async function serverActionDBA({
  id,
  name,
  pos,
}: {
  id: string;
  name: string;
  pos: string;
}) {

  // ...

  return '{status: 200}';
}

Server component
- app/demo/B.server.tsx

// ...

import G from './G';
import { serverActionDBA } from './server-actions/serverActionG';

export default async function B() {

  // ...

  return (
    <ul className="list-disc">
      {rows.map(({ id, name, pos }) => (
        <li key={id} className="m-5">
          <G id={id} name={name} pos={pos} serverActionDBA={serverActionDBA} />
          <Suspense fallback={<div>⏳</div>}>
            {/* @ts-expect-error Async Server Component */}
            <F_server id={id} name={name} pos={pos} />
          </Suspense>
        </li>
      ))}
    </ul>
  );
}

Client component
- app/demo/G.tsx

'use client';

import { useState } from 'react';
import { z } from 'zod';

export default function G({
  id,
  name,
  pos,
  serverActionDBA,
}: {
  id: string;
  name: string;
  pos: string;
  serverActionDBA: ({
    id,
    name,
    pos,
  }: {
    id: string;
    name: string;
    pos: string;
  }) => Promise<string>;
}) {
  const [error, setError] = useState('');

  return (
    <>
      <div>
        <>
          <form
            action={async (formData: FormData) => {
              const ValidationSchema = z.object({
                id: z.string().min(2),
                name: z.string().max(25),
                pos: z.string().max(10),
              });

              try {
                ValidationSchema.parse({
                  id: formData.get('id'),
                  name: formData.get('name'),
                  pos: formData.get('pos'),
                } as z.infer<typeof ValidationSchema>);

                const result = await serverActionDBA({
                  id: formData.get('id')?.toString() ?? '',
                  name: formData.get('name')?.toString() ?? '',
                  pos: formData.get('pos')?.toString() ?? '',
                });

                console.log(result);

                setError('');
              } catch (error) {
                setError('Error');
              }
            }}
          >
            <input
              name="id"
              type="text"
              className="w-1/5 rounded border-gray-200"
              defaultValue={id}
            />
            <input
              name="name"
              type="text"
              className="w-2/5 rounded border-gray-200"
              defaultValue={name}
            />
            <input
              name="pos"
              type="text"
              className="w-1/5 rounded border-gray-200"
              defaultValue={pos}
            />
            <div className="inline w-1/5">
              <button className="w-16 rounded bg-blue-500 p-2 font-bold text-white hover:bg-blue-700">
                Save
              </button>
            </div>
            <p className="text-red-600">{error}</p>
          </form>
        </>
      </div>
    </>
  );
}

The code for this area can be found here.

https://github.com/vteacher-online/nrstate-demo/tree/example/next13-boilerplate

Pattern without FormData

You can also use only Server Actions (empty the process associated with FormData).

'use server';

export async function serverActionEmpty() {}

export async function serverActionDBA({ id, name, pos }: { id: string; name: string; pos: string; }) {
  return `serverActionDBA: id=${id}, name=${name}, pos=${pos}`;
}

{/* Server Components */}
<form action={serverActionEmpty}>
  <G serverActionDBA={serverActionDBA} id={id} name={name} pos={pos} />
</form>

'use client';

<button onClick={ async () => {

    // Validation
    // ...

    const result = await serverActionDBA({
        id: _id, name: _name, pos: _pos
    });

    console.log(result);
}}
>
  G
</button>

The code for this area can be found here.

https://github.com/vteacher-online/nrstate-demo/tree/example/server-actions-validation

In the end

You've been very busy at Next.js Conf.

(sleepy...)

Next13 /app Reacet Server Comonents

VTeacher — Thu, 04 May 2023 14:55:16 +0000

RSC

Reacet Server Components ・・・ RSC for short.

RSC was announced by Meta (formerly Facebook) at the end of 2020, and has since been working on the project with Vercel.

https://beta.nextjs.org/docs/rendering/server-and-client-components

After all, what is RSC?

First of all, my impression of Meta's front-end team.
Perhaps because Facebook ( https://facebook.com/ ) was originally built with PHP, even though I'm in charge of the front desk, I also have the perspective of a backend engineer, and I get the impression that performance is also very important.

https://www.youtube.com/watch?v=8pDqJVdNa44

Historically, there are the following circumstances and challenges
(in order of chronological order: 1 → 2 → 3)

Let's create a client side with PHP (server side rendering)
Create the client side with JavaScript (React)
Render JavaScript (React) on the server side like PHP

All of them had issues, so
this time I'm trying to make it possible to select server-side rendering or client-side rendering for each component!
That is my understanding of React Server Components (RSC).

Learn more

Famous article:
https://www.plasmic.app/blog/how-react-server-components-work

important point

Because the server needs to do some of the rendering, the life of a page using RSC always starts at the server, in response to some API call to render a React component. This “root” component is always a server component, which may render other server or client components.

For now, you must re-render the entire React tree from the root server component, though in the future, it may become possible to do this for sub-trees.

All props must be serializable
Because we are serializing the whole React tree to JSON, all the props that you are passing to client components or base html tags must be serializable as well. That means from a server component, you cannot pass down an event handler as a prop!

*Note: In the case of Next.js, the route can be a client component, but for RSC it is desirable to make it a server component.

RSC demo app

nrstate-demo https://nrstate-demo.vercel.app/

*If viewing on a smartphone, remove the orientation lock 🔐 and view horizontally!

RSC that does not think too hard

Since the theme of this post is "Reacet Server Components (RSC) that are not difficult to think about", we will create an RSC web application in a step-by-step format from here.

Example

Consider a simple search/list screen as an example.

Search Form → Component A
Search result list from search keyword and sort order → Component B
Menu list → Component C
Sort Order → Component D
Related ads from search keywords → Component E

STEP1. Draw component tree with component first

First, let's draw a component tree with a component-first design policy.

For this example, I think it would look something like this:

<>
  <div className="float-left w-1/3">
    <C />
    <E />
  </div>
  <div className="float-right w-2/3">
    <A />
    <D />
    <B />
  </div>
</>

STEP2. Decide on server components

Let's decide which components should be server-side rendered by referring to this article I introduced earlier.

https://www.plasmic.app/blog/how-react-server-components-work

Components that should be server-side rendered

Is this better than just fetching data from client components?
If we need to make an API request to the server anyway to fetch this content, is this really better than making a request to fetch just the data and then doing the rendering completely in the client, as we do today?

Ultimately, it depends on what you are rendering to the screen. With RSC, you get denormalized, “processed” data that maps directly to what you are showing to the user, so you win out if you are only rendering a small slice of the data you would be fetching, or if the rendering itself requires a lot of javascript that you would like to avoid downloading to the browser. And if rendering requires multiple data fetches that depend on each other in a waterfall, then it is better that the fetching happens on the server — where data latency is much lower — than from the browser.

HM···

It's a bit difficult to understand at first glance.

Now let's take a closer look at the actual data.

In this article, there are two main points of view for selecting components that should be server-side rendered:

(1) Waterfall Perspective

Consider the pattern of issuing an API multiple times depending on the parent component.
For example, after obtaining the list of WBC players using the API, the IDs unique to each player (gray characters in the figure below) are obtained one by one using another API.

With a client component, all APIs are hit (fetched) on the client side.

I tried it, so check out the screenshot waterfall!
You can see the queue of processing on the client side, just like a waterfall flowing from top to bottom.

(Source code)

If you make this with a server component, you can improve it as follows.

Fetching for the number of players is the same, but rendering is done on the server side (only the rendering data is passed to the client), so the waterfall on the client side is eliminated.

In such an example,
I think that the display speed is usually faster if the server component is used.

*Regarding RSC, it is assumed that the processing power of the server is superior to that of the client terminal (Mac or smartphone).

(Source code)

(2) Bundle size perspective

It is a feature of server components, but the JavaScript
that server components importdo is not included in the bundle.

:::details Zero-Bundle-Size
https://react.dev/blog/2020/12/21/data-fetching-with-react-server-components
:::

I created the following file for testing.

Prepare files that tend to increase the bundle size

https://github.com/vteacher-online/nrstate-demo/blob/example/waterfall-sc/app/demo/_trademark.js

When using on the client side getTrademark(stateA), this js file will be included in the bundle. getTrademark(stateA)will return data for either cats or dogs, but stateAif the argument is already determined, either the cats data or the dogs data will be wasted.

This means that the bundle size will increase.

So, "If the original stateA is decided, import it on the server side, finish rendering, and pass only the rendering data to the client side, either cats or dogs data is unnecessary, so that part We can reduce the bundle size, right?" was born. A server component makes this easy.

Now let's take a peek at the actual data in the server component!

Verification result with nrstate-demo
Example of data returned by the server component to the browser
(this data contains 🐶 but not 🐱)

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><link rel="stylesheet" href="/_next/static/css/0a5352b396d16c45.css" data-precedence="next.js"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any"/><script src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js" noModule=""></script></head><body><div class="p-5"><div class="float-left w-1/4 rounded p-5 outline-dashed"><div class="rounded p-5 outline-dashed">C<ul class="list-disc"><li>Menu 1</li><li>Menu 2</li><li>Menu 3</li></ul></div><div class="rounded p-5 outline-dashed">E<p>AdWords (a=<!-- -->)</p><ul class="list-disc"><li class="m-5"><a href="https://www.google.com/search?q=baseball+pitcher&amp;tbm=shop" target="_blank" class="text-blue-700">pitcher</a></li><li class="m-5"><a href="https://www.google.com/search?q=baseball+catcher&amp;tbm=shop" target="_blank" class="text-blue-700">catcher</a></li><li class="m-5"><a href="https://www.google.com/search?q=baseball+infielder&amp;tbm=shop" target="_blank" class="text-blue-700">infielder</a></li><li class="m-5"><a href="https://www.google.com/search?q=baseball+outfielder&amp;tbm=shop" target="_blank" class="text-blue-700">outfielder</a></li></ul><p>Trademark</p><p>🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶</p></div></div><div class="float-right w-3/4 rounded p-5 outline-dashed"><div class="rounded p-5 outline-dashed"><div class="w-full rounded p-5 outline-dashed"><p>A</p><input class="w-11/12 rounded border-gray-200" type="text" value=""/><button class="w-1/12 rounded bg-blue-500 p-2 font-bold text-white hover:bg-blue-700 ">Filter</button></div><div class="rounded p-5 outline-dashed">D<select class="w-full rounded border-gray-200"><option selected="">asc</option><option>desc</option></select></div></div><div class="min-h-screen rounded p-5 outline-dashed">B (a=<!-- -->, d=<!-- -->asc<!-- -->)<div><!--$?--><template id="B:0"></template><div>⏳</div><!--/$--></div></div></div></div><script src="/_next/static/chunks/webpack-60b5f5f0cf8a3297.js" async=""></script><script src="/_next/static/chunks/11bf6ca7-a2ce159f3bc7ef9c.js" async=""></script><script src="/_next/static/chunks/285-edefc2b97dcf9253.js" async=""></script><script src="/_next/static/chunks/main-app-5c8ac933ea5f8048.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"0:\"$L1\"\n"])</script><script>self.__next_f.push([1,"2:I{\"id\":\"3941\",\"chunks\":[\"272:static/chunks/webpack-60b5f5f0cf8a3297.js\",\"335:static/chunks/11bf6ca7-a2ce159f3bc7ef9c.js\",\"285:static/chunks/285-edefc2b97dcf9253.js\"],\"name\":\"\",\"async\":false}\n4:I{\"id\":\"8563\",\"chunks\":[\"272:static/chunks/webpack-60b5f5f0cf8a3297.js\",\"335:static/chunks/11bf6ca7-a2ce159f3bc7ef9c.js\",\"285:static/chunks/285-edefc2b97dcf9253.js\"],\"name\":\"\",\"async\":false}\n5:I{\"id\":\"2086\",\"chunks\":[\"272:static/chunks/webpack-60b5f5f0cf8a3297.js\",\"335:static/chunks/11bf6ca7-a2ce159f3bc7ef9c.js\",\"28"])</script><script>self.__next_f.push([1,"5:static/chunks/285-edefc2b97dcf9253.js\"],\"name\":\"\",\"async\":false}\n6:I{\"id\":\"9861\",\"chunks\":[\"272:static/chunks/webpack-60b5f5f0cf8a3297.js\",\"335:static/chunks/11bf6ca7-a2ce159f3bc7ef9c.js\",\"285:static/chunks/285-edefc2b97dcf9253.js\"],\"name\":\"\",\"async\":false}\n"])</script><script>self.__next_f.push([1,"1:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/0a5352b396d16c45.css\",\"precedence\":\"next.js\"}]],[\"$\",\"$L2\",null,{\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/demo\",\"initialTree\":[\"\",{\"children\":[\"demo\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialHead\":\"$L3\",\"globalErrorComponent\":\"$4\",\"notFound\":[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{}],[\"$\",\"body\",null,{\"children\":[\"$undefined\",[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]]}]]}],\"asNotFound\":false,\"children\":[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{}],[\"$\",\"body\",null,{\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"asNotFound\":false,\"childProp\":{\"current\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"demo\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"asNotFound\":false,\"childProp\":{\"current\":[\"$L7\",[null,null]],\"segment\":\"__PAGE__\"},\"styles\":[]}],\"segment\":\"demo\"},\"styles\":[]}]}]]}],[null,null]]}]]\n"])</script><script>self.__next_f.push([1,"3:[[[\"$\",\"meta\",null,{\"charSet\":\"utf-8\"}],null,null,null,null,null,null,null,null,null,null,[\"$\",\"meta\",null,{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],null,null,null,null,null,null,null,null,null,null,[]],[null,null,null,null],null,null,[null,null,null,null,null],null,null,null,null,[null,[[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"any\"}]],[],null]]\n"])</script><script>self.__next_f.push([1,"8:I{\"id\":\"2463\",\"chunks\":[\"139:static/chunks/139-d606be6fb8a8fb38.js\",\"931:static/chunks/app/page-e04f09648d5c3e94.js\"],\"name\":\"\",\"async\":false}\n9:I{\"id\":\"5135\",\"chunks\":[\"139:static/chunks/139-d606be6fb8a8fb38.js\",\"298:static/chunks/app/demo/page-1f43549620cca251.js\"],\"name\":\"\",\"async\":false}\na:I{\"id\":\"6829\",\"chunks\":[\"139:static/chunks/139-d606be6fb8a8fb38.js\",\"298:static/chunks/app/demo/page-1f43549620cca251.js\"],\"name\":\"\",\"async\":false}\nb:I{\"id\":\"2273\",\"chunks\":[\"139:static/chunks/139-d606be6fb8a8fb38.j"])</script><script>self.__next_f.push([1,"s\",\"298:static/chunks/app/demo/page-1f43549620cca251.js\"],\"name\":\"\",\"async\":false}\nc:I{\"id\":\"5940\",\"chunks\":[\"139:static/chunks/139-d606be6fb8a8fb38.js\",\"298:static/chunks/app/demo/page-1f43549620cca251.js\"],\"name\":\"\",\"async\":false}\nd:I{\"id\":\"3107\",\"chunks\":[\"139:static/chunks/139-d606be6fb8a8fb38.js\",\"298:static/chunks/app/demo/page-1f43549620cca251.js\"],\"name\":\"\",\"async\":false}\ne:\"$Sreact.suspense\"\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"$L8\",null,{\"current\":{\"a\":\"\",\"d\":\"asc\"},\"children\":[\"$\",\"div\",null,{\"className\":\"p-5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"float-left w-1/4 rounded p-5 outline-dashed\",\"children\":[[\"$\",\"$L9\",null,{}],[\"$\",\"$La\",null,{\"adWords\":[{\"id\":\"63\",\"pos\":\"pitcher\"},{\"id\":\"27\",\"pos\":\"catcher\"},{\"id\":\"55\",\"pos\":\"infielder\"},{\"id\":\"34\",\"pos\":\"outfielder\"}],\"trademark\":\"🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶\"}]]}],[\"$\",\"div\",null,{\"className\":\"float-right w-3/4 rounded p-5 outline-dashed\",\"children\":[[\"$\",\"div\",null,{\"className\":\"rounded p-5 outline-dashed\",\"children\":[[\"$\",\"$Lb\",null,{}],[\"$\",\"$Lc\",null,{}]]}],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$Lf\"}]}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"f:[\"$\",\"ul\",null,{\"className\":\"list-disc\",\"children\":[[\"$\",\"li\",\"01\",{\"className\":\"m-5\",\"children\":[\"01\",\" : \",\"Tetsuto Yamada\",\" (\",\"infielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L10\"}]]}],[\"$\",\"li\",\"02\",{\"className\":\"m-5\",\"children\":[\"02\",\" : \",\"Sosuke Genda\",\" (\",\"infielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L11\"}]]}],[\"$\",\"li\",\"03\",{\"className\":\"m-5\",\"children\":[\"03\",\" : \",\"Shugo Maki\",\" (\",\"infielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L12\"}]]}],[\"$\",\"li\",\"05\",{\"className\":\"m-5\",\"children\":[\"05\",\" : \",\"Taisei Makihara\",\" (\",\"infielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L13\"}]]}],[\"$\",\"li\",\"07\",{\"className\":\"m-5\",\"children\":[\"07\",\" : \",\"Takumu Nakano\",\" (\",\"infielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L14\"}]]}],[\"$\",\"li\",\"08\",{\"className\":\"m-5\",\"children\":[\"08\",\" : \",\"Kensuke Kondo\",\" (\",\"outfielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L15\"}]]}],[\"$\",\"li\",\"09\",{\"className\":\"m-5\",\"children\":[\"09\",\" : \",\"Ukyo Shuto\",\" (\",\"outfielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L16\"}]]}],[\"$\",\"li\",\"10\",{\"className\":\"m-5\",\"children\":[\"10\",\" : \",\"Takuya Kai\",\" (\",\"catcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L17\"}]]}],[\"$\",\"li\",\"11\",{\"className\":\"m-5\",\"children\":[\"11\",\" : \",\"Yu Darvish\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L18\"}]]}],[\"$\",\"li\",\"12\",{\"className\":\"m-5\",\"children\":[\"12\",\" : \",\"Shosei Togo\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L19\"}]]}],[\"$\",\"li\",\"13\",{\"className\":\"m-5\",\"children\":[\"13\",\" : \",\"Yuki Matsui\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L1a\"}]]}],[\"$\",\"li\",\"14\",{\"className\":\"m-5\",\"children\":[\"14\",\" : \",\"Roki Sasaki\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L1b\"}]]}],[\"$\",\"li\",\"15\",{\"className\":\"m-5\",\"children\":[\"15\",\" : \",\"Taisei Ota\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L1c\"}]]}],[\"$\",\"li\",\"16\",{\"className\":\"m-5\",\"children\":[\"16\",\" : \",\"Shohei Ohtani\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L1d\"}]]}],[\"$\",\"li\",\"17\",{\"className\":\"m-5\",\"children\":[\"17\",\" : \",\"Hiromi Itoh\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L1e\"}]]}],[\"$\",\"li\",\"18\",{\"className\":\"m-5\",\"children\":[\"18\",\" : \",\"Yoshinobu Yamamoto\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L1f\"}]]}],[\"$\",\"li\",\"20\",{\"className\":\"m-5\",\"children\":[\"20\",\" : \",\"Ryoji Kuribayashi\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L20\"}]]}],[\"$\",\"li\",\"21\",{\"className\":\"m-5\",\"children\":[\"21\",\" : \",\"Shota Imanaga\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L21\"}]]}],[\"$\",\"li\",\"22\",{\"className\":\"m-5\",\"children\":[\"22\",\" : \",\"Atsuki Yuasa\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L22\"}]]}],[\"$\",\"li\",\"23\",{\"className\":\"m-5\",\"children\":[\"23\",\" : \",\"Lars Nootbaar\",\" (\",\"outfielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L23\"}]]}],[\"$\",\"li\",\"24\",{\"className\":\"m-5\",\"children\":[\"24\",\" : \",\"Takumi Ohshiro\",\" (\",\"catcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L24\"}]]}],[\"$\",\"li\",\"25\",{\"className\":\"m-5\",\"children\":[\"25\",\" : \",\"Kazuma Okamoto\",\" (\",\"infielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L25\"}]]}],[\"$\",\"li\",\"26\",{\"className\":\"m-5\",\"children\":[\"26\",\" : \",\"Yuki Udagawa\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L26\"}]]}],[\"$\",\"li\",\"27\",{\"className\":\"m-5\",\"children\":[\"27\",\" : \",\"Yuhei Nakamura\",\" (\",\"catcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L27\"}]]}],[\"$\",\"li\",\"28\",{\"className\":\"m-5\",\"children\":[\"28\",\" : \",\"Hiroto Takahashi\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L28\"}]]}],[\"$\",\"li\",\"29\",{\"className\":\"m-5\",\"children\":[\"29\",\" : \",\"Hiroya Miyagi\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L29\"}]]}],[\"$\",\"li\",\"33\",{\"className\":\"m-5\",\"children\":[\"33\",\" : \",\"Hotaka Yamakawa\",\" (\",\"infielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L2a\"}]]}],[\"$\",\"li\",\"34\",{\"className\":\"m-5\",\"children\":[\"34\",\" : \",\"Masataka Yoshida\",\" (\",\"outfielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L2b\"}]]}],[\"$\",\"li\",\"47\",{\"className\":\"m-5\",\"children\":[\"47\",\" : \",\"Keiji Takahashi\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L2c\"}]]}],[\"$\",\"li\",\"55\",{\"className\":\"m-5\",\"children\":[\"55\",\" : \",\"Munetaka Murakami\",\" (\",\"infielder\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L2d\"}]]}],[\"$\",\"li\",\"63\",{\"className\":\"m-5\",\"children\":[\"63\",\" : \",\"Soichiro Yamazaki\",\" (\",\"pitcher\",\")\",[\"$\",\"$e\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"⏳\"}],\"children\":\"$L2e\"}]]}]]}]\n"])</script><div hidden id="S:0"><ul class="list-disc"><li class="m-5">01<!-- --> : <!-- -->Tetsuto Yamada<!-- --> (<!-- -->infielder<!-- -->)<!--$?--><template id="B:1"></template><div>⏳</div><!--/$--></li><li class="m-5">02<!-- --> : <!-- -->Sosuke Genda<!-- --> (<!-- -->infielder<!-- -->)<!--$?--><template id="B:2"></template><div>⏳</div><!--/$--></li><li class="m-5">03<!-- --> : <!-- -->Shugo Maki<!-- --> (<!-- -->infielder<!-- -->)<!--$?--><template id="B:3"></template><div>⏳</div><!--/$--></li><li class="m-5">05<!-- --> : <!-- -->Taisei Makihara<!-- --> (<!-- -->infielder<!-- -->)<!--$?--><template id="B:4"></template><div>⏳</div><!--/$--></li><li class="m-5">07<!-- --> : <!-- -->Takumu Nakano<!-- --> (<!-- -->infielder<!-- -->)<!--$?--><template id="B:5"></template><div>⏳</div><!--/$--></li><li class="m-5">08<!-- --> : <!-- -->Kensuke Kondo<!-- --> (<!-- -->outfielder<!-- -->)<!--$?--><template id="B:6"></template><div>⏳</div><!--/$--></li><li class="m-5">09<!-- --> : <!-- -->Ukyo Shuto<!-- --> (<!-- -->outfielder<!-- -->)<!--$?--><template id="B:7"></template><div>⏳</div><!--/$--></li><li class="m-5">10<!-- --> : <!-- -->Takuya Kai<!-- --> (<!-- -->catcher<!-- -->)<!--$?--><template id="B:8"></template><div>⏳</div><!--/$--></li><li class="m-5">11<!-- --> : <!-- -->Yu Darvish<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:9"></template><div>⏳</div><!--/$--></li><li class="m-5">12<!-- --> : <!-- -->Shosei Togo<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:a"></template><div>⏳</div><!--/$--></li><li class="m-5">13<!-- --> : <!-- -->Yuki Matsui<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:b"></template><div>⏳</div><!--/$--></li><li class="m-5">14<!-- --> : <!-- -->Roki Sasaki<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:c"></template><div>⏳</div><!--/$--></li><li class="m-5">15<!-- --> : <!-- -->Taisei Ota<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:d"></template><div>⏳</div><!--/$--></li><li class="m-5">16<!-- --> : <!-- -->Shohei Ohtani<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:e"></template><div>⏳</div><!--/$--></li><li class="m-5">17<!-- --> : <!-- -->Hiromi Itoh<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:f"></template><div>⏳</div><!--/$--></li><li class="m-5">18<!-- --> : <!-- -->Yoshinobu Yamamoto<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:10"></template><div>⏳</div><!--/$--></li><li class="m-5">20<!-- --> : <!-- -->Ryoji Kuribayashi<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:11"></template><div>⏳</div><!--/$--></li><li class="m-5">21<!-- --> : <!-- -->Shota Imanaga<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:12"></template><div>⏳</div><!--/$--></li><li class="m-5">22<!-- --> : <!-- -->Atsuki Yuasa<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:13"></template><div>⏳</div><!--/$--></li><li class="m-5">23<!-- --> : <!-- -->Lars Nootbaar<!-- --> (<!-- -->outfielder<!-- -->)<!--$?--><template id="B:14"></template><div>⏳</div><!--/$--></li><li class="m-5">24<!-- --> : <!-- -->Takumi Ohshiro<!-- --> (<!-- -->catcher<!-- -->)<!--$?--><template id="B:15"></template><div>⏳</div><!--/$--></li><li class="m-5">25<!-- --> : <!-- -->Kazuma Okamoto<!-- --> (<!-- -->infielder<!-- -->)<!--$?--><template id="B:16"></template><div>⏳</div><!--/$--></li><li class="m-5">26<!-- --> : <!-- -->Yuki Udagawa<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:17"></template><div>⏳</div><!--/$--></li><li class="m-5">27<!-- --> : <!-- -->Yuhei Nakamura<!-- --> (<!-- -->catcher<!-- -->)<!--$?--><template id="B:18"></template><div>⏳</div><!--/$--></li><li class="m-5">28<!-- --> : <!-- -->Hiroto Takahashi<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:19"></template><div>⏳</div><!--/$--></li><li class="m-5">29<!-- --> : <!-- -->Hiroya Miyagi<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:1a"></template><div>⏳</div><!--/$--></li><li class="m-5">33<!-- --> : <!-- -->Hotaka Yamakawa<!-- --> (<!-- -->infielder<!-- -->)<!--$?--><template id="B:1b"></template><div>⏳</div><!--/$--></li><li class="m-5">34<!-- --> : <!-- -->Masataka Yoshida<!-- --> (<!-- -->outfielder<!-- -->)<!--$?--><template id="B:1c"></template><div>⏳</div><!--/$--></li><li class="m-5">47<!-- --> : <!-- -->Keiji Takahashi<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:1d"></template><div>⏳</div><!--/$--></li><li class="m-5">55<!-- --> : <!-- -->Munetaka Murakami<!-- --> (<!-- -->infielder<!-- -->)<!--$?--><template id="B:1e"></template><div>⏳</div><!--/$--></li><li class="m-5">63<!-- --> : <!-- -->Soichiro Yamazaki<!-- --> (<!-- -->pitcher<!-- -->)<!--$?--><template id="B:1f"></template><div>⏳</div><!--/$--></li></ul></div><script>$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}};$RC("B:0","S:0")</script><script>self.__next_f.push([1,"12:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"57a1562c59cfb8e558a970439b80f80da3b264a7\"}]\n"])</script><div hidden id="S:3"><p class="text-xs text-slate-400">57a1562c59cfb8e558a970439b80f80da3b264a7</p></div><script>$RC("B:3","S:3")</script><script>self.__next_f.push([1,"22:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"d071bbfeb87182d67dd7b9c4898ccf925fe58cf0\"}]\n"])</script><div hidden id="S:13"><p class="text-xs text-slate-400">d071bbfeb87182d67dd7b9c4898ccf925fe58cf0</p></div><script>$RC("B:13","S:13")</script><script>self.__next_f.push([1,"1c:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"4f68bd8ecd4ae30d126e880294b94fa566203035\"}]\n"])</script><div hidden id="S:d"><p class="text-xs text-slate-400">4f68bd8ecd4ae30d126e880294b94fa566203035</p></div><script>$RC("B:d","S:d")</script><script>self.__next_f.push([1,"20:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"9b74ffb2cdeb71796e68b473b8680099e36bf4c3\"}]\n"])</script><div hidden id="S:11"><p class="text-xs text-slate-400">9b74ffb2cdeb71796e68b473b8680099e36bf4c3</p></div><script>$RC("B:11","S:11")</script><script>self.__next_f.push([1,"14:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"b1e67b4896b61e6977c324603e2ae35989f50583\"}]\n1e:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"8d39a4b7b6791400863475abca7fd1f182467d5c\"}]\n"])</script><div hidden id="S:5"><p class="text-xs text-slate-400">b1e67b4896b61e6977c324603e2ae35989f50583</p></div><script>$RC("B:5","S:5")</script><div hidden id="S:f"><p class="text-xs text-slate-400">8d39a4b7b6791400863475abca7fd1f182467d5c</p></div><script>$RC("B:f","S:f")</script><script>self.__next_f.push([1,"11:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"e2c914842759f7b8031d65ead9f05f7a260951d7\"}]\n"])</script><div hidden id="S:2"><p class="text-xs text-slate-400">e2c914842759f7b8031d65ead9f05f7a260951d7</p></div><script>$RC("B:2","S:2")</script><script>self.__next_f.push([1,"2c:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"e6d11f23dd365e41ec1599bc91d27a56f409983b\"}]\n1a:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"eebabaf6b0a229c0d018eebf9ba2a5cfe588f7f2\"}]\n18:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"13c65325d54a2a09aede582f34761e0f273c18a8\"}]\n23:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"846c14a4d3477180a7ff7572db62d5ac25bdfcc9\"}]\n13:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"e"])</script><script>self.__next_f.push([1,"a5804226bfe28b375de49df04a56f8580388c93\"}]\n10:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"75e6cc8cdc6f61fdf52590fd0950c985af652cdf\"}]\n2a:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"a64c73241ca76cc073b38a249c54deae45ca253b\"}]\n24:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"ab29d4f09f9876fb985802bdff28f5f82f549b6b\"}]\n"])</script><div hidden id="S:1d"><p class="text-xs text-slate-400">e6d11f23dd365e41ec1599bc91d27a56f409983b</p></div><script>$RC("B:1d","S:1d")</script><div hidden id="S:b"><p class="text-xs text-slate-400">eebabaf6b0a229c0d018eebf9ba2a5cfe588f7f2</p></div><script>$RC("B:b","S:b")</script><div hidden id="S:9"><p class="text-xs text-slate-400">13c65325d54a2a09aede582f34761e0f273c18a8</p></div><script>$RC("B:9","S:9")</script><div hidden id="S:14"><p class="text-xs text-slate-400">846c14a4d3477180a7ff7572db62d5ac25bdfcc9</p></div><script>$RC("B:14","S:14")</script><div hidden id="S:4"><p class="text-xs text-slate-400">ea5804226bfe28b375de49df04a56f8580388c93</p></div><script>$RC("B:4","S:4")</script><div hidden id="S:1"><p class="text-xs text-slate-400">75e6cc8cdc6f61fdf52590fd0950c985af652cdf</p></div><script>$RC("B:1","S:1")</script><div hidden id="S:1b"><p class="text-xs text-slate-400">a64c73241ca76cc073b38a249c54deae45ca253b</p></div><script>$RC("B:1b","S:1b")</script><div hidden id="S:15"><p class="text-xs text-slate-400">ab29d4f09f9876fb985802bdff28f5f82f549b6b</p></div><script>$RC("B:15","S:15")</script><script>self.__next_f.push([1,"21:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"a52cc959ab522223787d15ea01be5b800b5e0c53\"}]\n25:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"b97521c65fc97ebbf1f1fc2ddac1485e4c2b4418\"}]\n1b:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"025316a00d2bf74664098947af6ca762bd2eb0f6\"}]\n15:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"c72c44770f989625020726ec1198ee471b7ee665\"}]\n1d:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"0"])</script><script>self.__next_f.push([1,"1ac98a489b4886d3399edc31d06b116c1907fd1\"}]\n29:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"aadbe2d62421535a78022bb90b80d71b04324dee\"}]\n2e:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"c86c41c0210a0001c368f83481b2fb8dc154d662\"}]\n17:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"54aaf0c3e98efc070aa441d3ab886cb8ee928d0c\"}]\n19:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"6ac30d12f03aa7418899d879dc13cfc273b3a139\"}]\n"])</script><div hidden id="S:12"><p class="text-xs text-slate-400">a52cc959ab522223787d15ea01be5b800b5e0c53</p></div><script>$RC("B:12","S:12")</script><div hidden id="S:16"><p class="text-xs text-slate-400">b97521c65fc97ebbf1f1fc2ddac1485e4c2b4418</p></div><script>$RC("B:16","S:16")</script><div hidden id="S:c"><p class="text-xs text-slate-400">025316a00d2bf74664098947af6ca762bd2eb0f6</p></div><script>$RC("B:c","S:c")</script><div hidden id="S:6"><p class="text-xs text-slate-400">c72c44770f989625020726ec1198ee471b7ee665</p></div><script>$RC("B:6","S:6")</script><div hidden id="S:e"><p class="text-xs text-slate-400">01ac98a489b4886d3399edc31d06b116c1907fd1</p></div><script>$RC("B:e","S:e")</script><div hidden id="S:1a"><p class="text-xs text-slate-400">aadbe2d62421535a78022bb90b80d71b04324dee</p></div><script>$RC("B:1a","S:1a")</script><div hidden id="S:1f"><p class="text-xs text-slate-400">c86c41c0210a0001c368f83481b2fb8dc154d662</p></div><script>$RC("B:1f","S:1f")</script><div hidden id="S:8"><p class="text-xs text-slate-400">54aaf0c3e98efc070aa441d3ab886cb8ee928d0c</p></div><script>$RC("B:8","S:8")</script><div hidden id="S:a"><p class="text-xs text-slate-400">6ac30d12f03aa7418899d879dc13cfc273b3a139</p></div><script>$RC("B:a","S:a")</script><script>self.__next_f.push([1,"1f:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"939235ed1eaac5a657dfc23cce4a6543243497a6\"}]\n28:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"a3e2d8d547674702bc2c5aaeb802c39d9616d44e\"}]\n27:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"086e04db2512b3e680448c5a9f7cba227feefd69\"}]\n2d:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"5df7ce593d08def6e405d5fe699eba8dc98b7e04\"}]\n26:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"8"])</script><script>self.__next_f.push([1,"33463bd62cab9696955d368308ca3ed6d4921d7\"}]\n16:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"13744fcff4c0069e9eaa7505b657d6e315916b97\"}]\n"])</script><div hidden id="S:10"><p class="text-xs text-slate-400">939235ed1eaac5a657dfc23cce4a6543243497a6</p></div><script>$RC("B:10","S:10")</script><div hidden id="S:19"><p class="text-xs text-slate-400">a3e2d8d547674702bc2c5aaeb802c39d9616d44e</p></div><script>$RC("B:19","S:19")</script><div hidden id="S:18"><p class="text-xs text-slate-400">086e04db2512b3e680448c5a9f7cba227feefd69</p></div><script>$RC("B:18","S:18")</script><div hidden id="S:1e"><p class="text-xs text-slate-400">5df7ce593d08def6e405d5fe699eba8dc98b7e04</p></div><script>$RC("B:1e","S:1e")</script><div hidden id="S:17"><p class="text-xs text-slate-400">833463bd62cab9696955d368308ca3ed6d4921d7</p></div><script>$RC("B:17","S:17")</script><div hidden id="S:7"><p class="text-xs text-slate-400">13744fcff4c0069e9eaa7505b657d6e315916b97</p></div><script>$RC("B:7","S:7")</script><script>self.__next_f.push([1,"2b:[\"$\",\"p\",null,{\"className\":\"text-xs text-slate-400\",\"children\":\"060003ba676e95c2b4c6c0bf5bea8f473cb50cf2\"}]\n"])</script><div hidden id="S:1c"><p class="text-xs text-slate-400">060003ba676e95c2b4c6c0bf5bea8f473cb50cf2</p></div><script>$RC("B:1c","S:1c")</script></body></html>

The good thing about server components is that they use cache in a good way.
(It seems that cache will be returned if it is the same location)
<Suspense> Asynchronously arriving server component data when using .

b:["$","ul",null,{"className":"list-disc","children":[["$","li","63",{"className":"m-5","children":["63"," : ","Soichiro Yamazaki"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$Lc"}]]}],["$","li","55",{"className":"m-5","children":["55"," : ","Munetaka Murakami"," (","infielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$Ld"}]]}],["$","li","47",{"className":"m-5","children":["47"," : ","Keiji Takahashi"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$Le"}]]}],["$","li","34",{"className":"m-5","children":["34"," : ","Masataka Yoshida"," (","outfielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$Lf"}]]}],["$","li","33",{"className":"m-5","children":["33"," : ","Hotaka Yamakawa"," (","infielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L10"}]]}],["$","li","29",{"className":"m-5","children":["29"," : ","Hiroya Miyagi"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L11"}]]}],["$","li","28",{"className":"m-5","children":["28"," : ","Hiroto Takahashi"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L12"}]]}],["$","li","27",{"className":"m-5","children":["27"," : ","Yuhei Nakamura"," (","catcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L13"}]]}],["$","li","26",{"className":"m-5","children":["26"," : ","Yuki Udagawa"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L14"}]]}],["$","li","25",{"className":"m-5","children":["25"," : ","Kazuma Okamoto"," (","infielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L15"}]]}],["$","li","24",{"className":"m-5","children":["24"," : ","Takumi Ohshiro"," (","catcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L16"}]]}],["$","li","23",{"className":"m-5","children":["23"," : ","Lars Nootbaar"," (","outfielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L17"}]]}],["$","li","22",{"className":"m-5","children":["22"," : ","Atsuki Yuasa"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L18"}]]}],["$","li","21",{"className":"m-5","children":["21"," : ","Shota Imanaga"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L19"}]]}],["$","li","20",{"className":"m-5","children":["20"," : ","Ryoji Kuribayashi"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L1a"}]]}],["$","li","18",{"className":"m-5","children":["18"," : ","Yoshinobu Yamamoto"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L1b"}]]}],["$","li","17",{"className":"m-5","children":["17"," : ","Hiromi Itoh"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L1c"}]]}],["$","li","16",{"className":"m-5","children":["16"," : ","Shohei Ohtani"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L1d"}]]}],["$","li","15",{"className":"m-5","children":["15"," : ","Taisei Ota"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L1e"}]]}],["$","li","14",{"className":"m-5","children":["14"," : ","Roki Sasaki"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L1f"}]]}],["$","li","13",{"className":"m-5","children":["13"," : ","Yuki Matsui"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L20"}]]}],["$","li","12",{"className":"m-5","children":["12"," : ","Shosei Togo"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L21"}]]}],["$","li","11",{"className":"m-5","children":["11"," : ","Yu Darvish"," (","pitcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L22"}]]}],["$","li","10",{"className":"m-5","children":["10"," : ","Takuya Kai"," (","catcher",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L23"}]]}],["$","li","09",{"className":"m-5","children":["09"," : ","Ukyo Shuto"," (","outfielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L24"}]]}],["$","li","08",{"className":"m-5","children":["08"," : ","Kensuke Kondo"," (","outfielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L25"}]]}],["$","li","07",{"className":"m-5","children":["07"," : ","Takumu Nakano"," (","infielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L26"}]]}],["$","li","05",{"className":"m-5","children":["05"," : ","Taisei Makihara"," (","infielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L27"}]]}],["$","li","03",{"className":"m-5","children":["03"," : ","Shugo Maki"," (","infielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L28"}]]}],["$","li","02",{"className":"m-5","children":["02"," : ","Sosuke Genda"," (","infielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L29"}]]}],["$","li","01",{"className":"m-5","children":["01"," : ","Tetsuto Yamada"," (","infielder",")",["$","$a",null,{"fallback":["$","div",null,{"children":"â³"}],"children":"$L2a"}]]}]]}]

Size

As for size, there is definitely a difference.
The server component is a little smaller in size.

When imported by client component

(Source code)

When imported by server component

(Source code)

from above

In this example, the following are server components.

Because it uses the component B API multiple times (Waterfall perspective)
Component E is used in the ad display field (from the viewpoint of bundle size
)getTrademark(stateA)
Also, make Root a server component.

For now, you must re-render the entire React tree from the root server component
https://www.plasmic.app/blog/how-react-server-components-work

*Orange: Server component
*Blue: Client component

STEP3. Make the server component a composition structure

In STEP2, I chose component B and component E as server components.

It's easier to comprehend and work with the composition structure of the server component, so let's start with that for the time being.

<B>
  <Suspense fallback={<div>⏳</div>}>
    {/* @ts-expect-error Async Server Component */}
    <B_server />
  </Suspense>
</B>

https://ja.legacy.reactjs.org/docs/composition-vs-inheritance.html

Server components can use async!

export default async function B() {
  const res = await fetch('https://...', {
    method: 'GET',
  });
  ...
}

Rewrite the B and E parts of the JSX written in STEP1 as follows.

<>
  <div className="float-left w-1/3">
    <C />
    <E>
      <Suspense fallback={<div>⏳</div>}>
        {/* @ts-expect-error Async Server Component */}
        <E_server />
      </Suspense>
    </E>
  </div>
  <div className="float-right w-2/3">
    <A />
    <D />
    <B>
      <Suspense fallback={<div>⏳</div>}>
        {/* @ts-expect-error Async Server Component */}
        <B_server />
      </Suspense>
    </B>
  </div>
</>

Because TypeScript does not support this writing style, {/ @ts-expect-error Async Server Component */}let's remove the error by adding a ( from the official ).

STEP4. Decide the number of server-side renderings

Finally, decide how many times the server component will be rendered, i.e. how many times it will be rendered on the server side.
(Think in page units)

4-1. Server-side rendering only for the first time

If server-side rendering is first time only, it's pretty simple.
You can proceed with the implementation based on the JSX written in STEP3!

accomplished.

4-2. Server-side rendering multiple times

In the case of multiple server-side rendering, ingenuity is required.
Because of the following, which I touched on in the "Important Points" section above:

Entire React tree must be re-rendered from root server component

nrstateSince the theme is "RSC that doesn't think too hard", I will use state management for this . nrstateallows you PageStateto useStatere-render the root server component with a similar feel.

https://www.npmjs.com/package/nrstate

Read the state (PageState) in the server component

const pageState = getPageState<PageStateDemo>(initialPageStateDemo, pathDemo);
const { a, d } = pageState;

Read the state (PageState) in the client component

const [pageState, setPageState] = usePageState<PageStateDemo>();
const { a, d } = pageState;

Re-render Root Server Components Updating the state (PageState) causes the root server components to be re-rendered. *Available only for client components

export default function ClientComponentInput() {
  const [pageState, setPageState] = usePageState<PageStateDemo>();
  const { a } = pageState;
  return (
    <input type="text" onChange={(e) => {
      setPageState({
          ...pageState,
          a: e.target.value,
        }, pathDemo);
      }}
    />
  );
}

useState Familiar functions such as * usePageState can be used in combination with.

Patterns without composition

When doing server-side rendering multiple times, it's sometimes a good idea to intentionally avoid composition.
For example, even if it's a server component, it's not as time consuming as using .

For example, in the example below, a ⏳ will appear each time the root server component is re-rendered.

<Suspense fallback={<div>⏳</div>}>
 <B_server />
</Suspense>

If you want to avoid this, do the heavy processing in the root server component (Page component) and pass the processed value to the child component as props.
Routes are also server-side, so you get the benefits of RSC.

export default async function Page() {
  const current = currentPageState<PageStateDemo>(
    initialPageStateDemo,
    pathDemo,
  );
  const { a } = current;

  const adWords = await getAdWords(a);

  return (
    <>
      <PageStateProvider current={current}>
        <div className="p-5">
          <div className="float-left w-1/4 rounded p-5 outline-dashed">
            <C />
            <E adWords={adWords} />
          </div>

I think that the page switching became natural now.

nrstate-demo https://nrstate-demo.vercel.app/

*If viewing on a smartphone, remove the orientation lock 🔐 and view horizontally!

Source code https://github.com/vteacher-online/nrstate-demo/

That's it, RSC that doesn't think too hard!

Show: A state management library for React Server Components (RSC) on Next.js 13

VTeacher — Thu, 27 Apr 2023 07:52:42 +0000

Show HN:
https://news.ycombinator.com/item?id=35724597

A state management library for React Server Components (RSC) on Next.js 13. A new invention to replace Recoil. This state can be read from any Server-component, and updates will result in a re-render of all components.

nrstate

State for React Server Components (RSC) on Next.js

N: Next.js

R: React Server Components

State

Features

✨ Next.js 13 support, for RSC

Read/Write state also works on Client-component.
Read state also works on Server-component.

Quick start

nrstate https://www.npmjs.com/package/nrstate

npm i nrstate

nrstate-client https://www.npmjs.com/package/nrstate-client

npm i nrstate-client

You can play with the example code here.

https://github.com/vteacher-online/nrstate-demo

Server and Client Components Observation

Implement persistence, read or write by observing all state changes across your page, without impairing code-splitting.

PageState

A PageState represents a state of Page-component.

Client-component

PageState can be read and write from any Client-component.
Server-component

PageState can be read from any Server-component.

ex.

PageStateDemo.tsx

export const pathDemo = '/demo';

export type PageStateDemo = {
  a: string;
  d: string;
};

export const initialPageStateDemo = { a: '', d: 'asc' } as PageStateDemo;

PageStateProvider

Components that use nrstate need <PageStateProvider> to appear somewhere in the parent tree. A good place to put this is in your root component.

Make the "page" Server-component.

( Do not write "use client" )

page.tsx

export default function Page() {
  return (
    <PageStateProvider
      current={currentPageState<PageStateDemo>(
        initialPageStateDemo,
        pathDemo,
      )}
    >
      <></>
    </PageStateProvider>
  );
}

Read PageState

Client component

'use client';

export default function ClientComponent() {
  const [pageState, setPageState] = usePageState<PageStateDemo>();
  const { a, d } = pageState;

  return (
    <>
      a={a}, d={d}
    </>
  );
}

Server component

export default async function ServerComponent() {
  const pageState = getPageState<PageStateDemo>(initialPageStateDemo, pathDemo);
  const { a, d } = pageState;

  return (
    <>
      a={a}, d={d}
    </>
  );
}

Write PageState

Client-component can use this.
PageState updates will result in a re-render of all components subscribed to that Page-component.

'use client';

export default function ClientComponentInput() {
  const [pageState, setPageState] = usePageState<PageStateDemo>();
  const { a } = pageState;
  return (
    <input type="text" onChange={(e) => {
      setPageState({
          ...pageState,
          a: e.target.value,
        }, pathDemo);
      }}
    />
  );
}

useState and usePageState can be used together.

You can play with the example code here.

https://github.com/vteacher-online/nrstate-demo

Then, http://localhost:3000/

Let's make a web application with React Server Components.

VTeacher — Mon, 09 Aug 2021 14:11:16 +0000

https://www.youtube.com/embed/eRAD3haXXzc

https://github.com/rgbkids/server-components-demo/blob/feature/vteacher/VTEACHER.md

Introduction

"I was late for React"

"I was doing Vue"

"SSR ( PHP / Ruby on Rails ) ..."

I think it's good news for such people.

If you want to start React now, I React Server Components recommend.

A paradigm change has occurred, and in the last five years or so, SSR (Server Side Rendering: PHP, Ruby on Rails, etc.) has changed to SPA (Single Page Application: React, Vue, etc.).
In the future, we are moving to the best of SPA and SSR .

Posted by this article

I wrote the following article 5 years ago (in the era of React v0.1). Thanks.
This time it's a sequel to this post.
As with the last time, the concept is "catch up a little earlier".

Current version of React

In December 2020, Facebook released a demo of React Server Components.

The current version of React is 18, but the official introduction of React Server Components is expected to be 19 or later. So far, experimental features have been released that can be said to be a stepping stone for React Server Components. As the industry expects, if everything is for React Server Components, the conventional wisdom will change, so I think it's easier to accept without prejudice.

Why don't you try to make a little web application that is convenient for the team while analyzing the demo code issued by the React team?
DB uses PostgreSQL, but the goal is React Server Components + Relay ＋ GraphQL .

Demonstration installation

See the README for how to install the demo.
https://github.com/reactjs/server-components-demo

If you can confirm it on localhost, let's move on.
http://localhost:4000/

Using this demo as a skeleton, I will add my own components.

Delete files other than necessary

It is okay to delete the rest of the files, leaving the following below src.

App.server.js
Root.client.js
Cache.client.js
db.server.js
LocationContext.client.js
index.client.js

Preparation / review

How to write React. For those who are new to us and those who haven't seen it in a long time. Here is the basic syntax.

export default function Hoge() {
    return (
        <div>
            This is Hoge.
        </div>
    );
}

By defining this with the file name Hoge, <Hoge /> you can tag it as follows. <Hoge /> The content is the HTML described in return, which is displayed when viewed from a web browser. This technology is called JSX and is developed by Facebook. Other components can be described in return.

How to add your own components

Types of React Sever Components

React Sever Components is a popular name. Three types of files are used for use.

Server component
- File name naming convention is .server.js
- Render on the server side
- Access to other resources (react-fetch to REST API, react-pg to DB reference, Relay + GraphQL, etc.)
Client component
- File name naming convention is .client.js
- Render on the client side
- Access to other resources (from react-fetch to REST API, etc.)
- You can use state just like a regular React component.
Common components
- File name naming convention is .js
- A component that can be used on both the server and client sides. overhead processing.

Naming (naming convention)

When I thought about a component called ToDO, I ended up with the following file structure.

ToDo.server.js
ToDo.client.js
ToDo.js

However, this is not recommended as the default name will be duplicated when importing (in this case you can set the name at ToDo .import). The Facebook demo doesn't have this structure either.
Design your components properly and divide them by component.

If the client component performs a process that only the server component is allowed to do, an error will occur.

Example: When using db (react-pg) in the client component, TypeError: Cannot read property 'db' of undefined it will be at runtime.

import {db} from './db.server'
(略)
const notes = db.query(
    `select * from notes where title ilike $1`,['%%']
).rows;

At first, it's easier to make everything a server component.
Change what the client component can do.

Fix App.server.js

React Server Components starts here. Describe the server component in this file.

For now, let's do this for now.

export default function App({selectedId, isEditing, searchText}) {
  return (
    <div>
    </div>
  );
}

Creating a component

Let's add our own components.

First prepare the server component

First, let's prepare the server component. As I mentioned earlier, let's start with everything as a server component and then look for what can be a client component.

Hoge.server.js Create directly under the src directory and copy the code below (because it is a server component, it will follow the rules server.js ).

src/Hoge.server.js (create new)

export default function Hoge() {
    return (
        <div>
            This is Hoge.server.js!
        </div>
    );
}

Write this Hoge (Hoge.server.js) in App.server.js.

src/App.server.js (Since it already exists, change it and save it)

import Hoge from './Hoge.server';

export default function App({selectedId, isEditing, searchText}) {
  return (
    <div className="main">
        <Hoge />
    </div>
  );
}

Server components are rendered on the server side. At the moment it is no different from regular SSR (PHP or Ruby on Rails) (we will create client components later).

Access to other resources

Server components can access db (react-pg) (although direct access to db is not recommended for app design).
You can use fetch (react-fetch) to use REST API. fetch can also be used from the client component, but you can reduce the amount of data returned to the client by processing it with the server component where it seems to be heavy processing (react Server Components target bundle size zero).

Let's change Hoge.server.js as follows.
If you check it with a web browser, the value obtained by db / fetch will be displayed.

src / Hoge.server.js (let's change it)

import {db} from './db.server'; // db（react-pg）
import {fetch} from 'react-fetch'; // fetch（react-fetch）

export default function Hoge() {
    // db
    const notes = db.query(
        `select id from notes`
    ).rows;

    // fetch
    const note = fetch(`http://localhost:4000/notes/1`).json();
    let {id, title, body, updated_at} = note;

    return (
        <div>
            <p>db:</p>
            <ul>
                {notes.map((note) => (
                    <li>{note.id}</li>
                ))}
            </ul>
            <p>fetch:</p>
            {id}{title}{body}{updated_at}
        </div>
    );
}

"experiment"

Let's copy Hoge.server.js and create Hoge.client.js.
Let's import App.server.js to Hoge.client. It will be
at run time TypeError: Cannot read property 'db' of undefined .
(Fetch is possible)
Let's restore it after the experiment (return the import of App.server.js to Hoge.server).

Describe server and client components

Let's write the server component and the client component in a nested manner. React Server Components, in principle, start with server components.
Let's design the following components.

- ServerComponentHello (Hello.server.js)
    ∟ ClientComponentLeft (Left.client.js)
- ServerComponentWorld (World.server.js)
    ∟ ClientComponentRight (Right.client.js)

src / App.server.js (let's change it)

import Hello from './Hello.server';
import World from './World.server';

export default function App({selectedId, isEditing, searchText}) {
  return (
    <div className="main">
        <Hello />
        <World />
    </div>
  );
}

src / Hello.server.js (Create new) Server component. Get the value from db and pass it on to the child client component (Left).

import {db} from './db.server';
import Left from './Left.client';

export default function Hello() {
    const notes = db.query(
        `select id from notes`
    ).rows;

    let text = "";
    notes.map((note) => {
        text += `${note.id},`;
    });

    return (
        <Left text={text} />
    );
}

src / World.server.js (Create new) Server component. The value is fetched by fetch and inherited by the child client component (Right).

import {fetch} from 'react-fetch';
import Right from './Right.client';

export default function World() {
    const note = fetch(`http://localhost:4000/notes/1`).json();
    let {id, title, body, updated_at} = note;
    let text = `${id}${title}${body}${updated_at}`;

    return (
        <Right text={text} />
    );
}

src / Left.client.js (Create new) Client component. Display the passed value on the left (set with css).

export default function Left({text}) {
    return (
        <div className="left">
            {text}
        </div>
    );
}

src / Right.client.js (Create new) Client component. Display the passed value on the right side (set with css).

export default function Right({text}) {
    return (
        <div className="right">
            {text}
        </div>
    );
}

public / style.css (change existing file. * Added at the end)

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

Let's check from a web browser.
http://localhost:4000/

You should see something like the following.

1,2 ...                1Meeting ...

"Supplement"
By the way, if you put ServerComponent which is a child of ClientComponent, no error will occur, but you cannot access db from that ServerComponent (fetch is possible).

- ServerComponentHello (Hello.server.js)
    ∟ ClientComponentLeft (Left.client.js)
        ∟ ServerComponentWorld (World.server.js) ※You cannot access db.
    ∟ ClientComponentRight (Right.client.js)

Benefits of React Server Components

Good points of SSR and SPA.
React Server Components benefit from "improved rendering performance (target bundle size zero)".
(React Server Components do not make the display lighter, but component design needs to be done properly, such as the WarterFall problem in SPA).

"Experiment"
Let's intentionally create a delay.

The React Server Components demo provides sleep for fetching.
Doing this intentionally creates a delay.

src/World.server.js (let's change)

import {fetch} from 'react-fetch';
import Right from './Right.client';

export default function World() {
    let _ = fetch(`http://localhost:4000/sleep/3000`); // Sleep 3 seconds

    const note = fetch(`http://localhost:4000/notes/1`).json();
    let {id, title, body, updated_at} = note;
    let text = `${id}${title}${body}${updated_at}`;

    return (
        <Right text={text} />
    );
}

Let's check it with a web browser.
I think it will be displayed after 3 seconds.
http://localhost:4000/

"Verification"
Using Chrome as a web browser, open Chrome's development tools (right-click to verify), select the Network tab, react?location=... and look at the Preview to see the data returned from the server side to the client side. increase.

TIPS (collection of numerous experimental functions)

It is said that the experimental functions so far have been prepared for React Server Components. These experimental features are used in the demo. I will introduce this as TIPS.

TIPS1: Suspense

Suspense is an experimental feature introduced in React 16.
You can "wait" for code to load and declaratively specify a loading state (like a spinner).
https://ja.reactjs.org/docs/concurrent-mode-suspense.html

Follow the demo <Suspense /> and use.

reference
https://github.com/reactwg/react-18/discussions/37
src / App.server.js (let's change it)

import {Suspense} from 'react';

import Hello from './Hello.server';
import World from './World.server';
import Right from "./Right.client";

export default function App({selectedId, isEditing, searchText}) {
    return (
        <div className="main">
            <Hello />
            <Suspense fallback={<Right text={"This is suspense."} />}>
                <World />
            </Suspense>
        </div>
    );
}

Let's check it with a web browser.
This time, This is suspense. I think you'll see the first, and after 3 seconds you'll see the full page.
http://localhost:4000/

TIPS2: Transition

When the screen is displayed suddenly, such as when you press a button, you may want to adjust the timing of screen update, such as when the white screen glances for a moment or when you can no longer see the information that was displayed before. I have.
You can skip these "what you don't want to see" and allow them to wait for new content to load before transitioning to a new screen.

reference https://ja.reactjs.org/docs/concurrent-mode-patterns.html

It is obvious when you actually try it.
Let's add the redrawing process. Prepare a pattern that uses transitions and a pattern that does not, and compare them.

src / Left.client.js (let's change it)

import {useTransition} from 'react';
import {useLocation} from './LocationContext.client';

export default function Left({text}) {
    const [location, setLocation] = useLocation();
    const [, startTransition] = useTransition();

    let idNext = location.selectedId + 1;

    return (
        <div className="left">
            <p>id={location.selectedId}</p>
            <button
                onClick={() => {
                    setLocation((loc) => ({
                        selectedId: idNext,
                        isEditing: false,
                        searchText: loc.searchText,
                    }));
                }}>
                Next id={idNext}
            </button>
            <button
                onClick={() => {
                    startTransition(() => {
                        setLocation((loc) => ({
                            selectedId: idNext,
                            isEditing: false,
                            searchText: loc.searchText,
                        }));
                    });
                }}>
                Next id={idNext} (Transition)
            </button>
            <p>{text}</p>
        </div>
    );
}

I think that using transitions will result in a more natural screen transition.
Without transitions, the Right component would display "This is suspense." Every time you press the Next button.
The Right component intentionally puts in a 3 second delay process, so regardless of the use of transitions, it will wait 3 seconds for new data to be displayed.

Pass values from client component to server component

This is a method of inheriting the value on the server side.
In the Facebook demo, the app takes three arguments ( {selectedId, isEditing, searchText} ).
This is related to the client component code for the transition above (the setLocation function in LocationContext.client).

        setLocation((loc) => ({
            selectedId: idNext,
            isEditing: false,
            searchText: loc.searchText,
        }));

This allows you to pass values from the client to the server.

The server component <Hello /> and <World /> , let's take over the selectedId. selectedId={selectedId} It is described as.

src / App.server.js (change)

import {Suspense} from 'react';

import Hello from './Hello.server';
import World from './World.server';
import Right from "./Right.client";

export default function App({selectedId, isEditing, searchText}) {
    return (
        <div className="main">
            <Hello selectedId={selectedId} />
            <Suspense fallback={<Right text={"This is suspense."} />}>
                <World selectedId={selectedId} />
            </Suspense>
        </div>
    );
}

<Hello /> and <World /> selectedId to change so that can also be referred to. Now that you can refer to the selectedId, let's use it for fetch / db.

src / Hello.server.js (change)

import {db} from './db.server';
import Left from './Left.client';

export default function Hello({selectedId}) {
    const notes = db.query(
        `select id from notes where id=$1`, [selectedId]
    ).rows;

    let text = selectedId;
    notes.map((note) => {
        text = note.id;
    });

    return (
        <Left text={text} />
    );
}

src / World.server.js (change)

import {fetch} from 'react-fetch';
import Right from './Right.client';

export default function World({selectedId}) {
    let _ = fetch(`http://localhost:4000/sleep/3000`); // Sleep 3 seconds

    if (!selectedId) {
        return (
            <Right />
        );
    }

    let note = fetch(`http://localhost:4000/notes/${selectedId}`).json();
    let {title, body, updated_at} = note;
    let text = `${selectedId}${title}${body}${updated_at}`;

    return (
        <Right text={text} />
    );
}

Let's check it with a web browser.
When you press Next, the data according to the id will be displayed.
http://localhost:4000/

Note: If you leave it as it is, if you specify an id that does not exist, a syntax error will occur and it will drop, so please correct the API of the demo (provisional support).

server / api.server.js (and change) 177 line, res.json(rows[0]); change res.json(rows[0] || "null"); .

app.get(
  '/notes/:id',
    ...
    res.json(rows[0] || "null");
    ...
);

"null" Please see here for the reason for choosing.

https://www.rfc-editor.org/rfc/rfc8259

https://stackoverflow.com/questions/9158665/json-parse-fails-in-google-chrome

Pull Request to reactjs/server-components-demo

https://github.com/reactjs/server-components-demo/pull/50

REST API processing by fetch

Let's register the record in PostgreSQL.
Use the API provided in the demo ( server/api.server.js implemented in).
server/api.server.js In addition to registration, there is also an API for updating / deleting.

Let's implement the registration process by referring to the demo code.

New registration (id is newly given). Press the Next button to check the newly created data. It is added at the very end.
It's okay to put a transition in onClick.

src / Former.server.js (create new)

import {fetch} from 'react-fetch';
import FormerClient from './Former.client';

export default function Former({selectedId}) {
    const note =
        selectedId != null
            ? fetch(`http://localhost:4000/notes/${selectedId}`).json()
            : null;

    if (!note) {
        return <FormerClient id={null} initialTitle={""} initialBody={""} />;
    }

    let {id, title, body} = note;

    return <FormerClient id={id} initialTitle={title} initialBody={body} />;

}

src / Former.client.js (create new)

import {useState, useTransition} from 'react';
import {useLocation} from './LocationContext.client';
import {createFromReadableStream} from 'react-server-dom-webpack';
import {useRefresh} from './Cache.client';

export default function Former({id, initialTitle, initialBody}) {
    const [title, setTitle] = useState(initialTitle);
    const [body, setBody] = useState(initialBody);

    const [location, setLocation] = useLocation();
    const [, startNavigating] = useTransition();
    const refresh = useRefresh();

    function navigate(response) {
        const cacheKey = response.headers.get('X-Location');
        const nextLocation = JSON.parse(cacheKey);
        const seededResponse = createFromReadableStream(response.body);
        startNavigating(() => {
            refresh(cacheKey, seededResponse);
            setLocation(nextLocation);
        });
    }

    async function handleCreate() {
        const payload = {title, body};
        const requestedLocation = {
            selectedId: "",
            isEditing: false,
            searchText: location.searchText,
        };
        const endpoint = `http://localhost:4000/notes/`;
        const method = `POST`;
        const response = await fetch(
            `${endpoint}?location=${encodeURIComponent(JSON.stringify(requestedLocation))}`,
            {
                method,
                body: JSON.stringify(payload),
                headers: {
                    'Content-Type': 'application/json',
                },
            }
        );
        console.log(response);
        navigate(response);
    }

    async function handleUpdate() {
        const payload = {title, body};
        const requestedLocation = {
            selectedId: location.selectedId,
            isEditing: false,
            searchText: location.searchText,
        };
        const endpoint = `http://localhost:4000/notes/${location.selectedId}`;
        const method = `PUT`;
        const response = await fetch(
            `${endpoint}?location=${encodeURIComponent(JSON.stringify(requestedLocation))}`,
            {
                method,
                body: JSON.stringify(payload),
                headers: {
                    'Content-Type': 'application/json',
                },
            }
        );
        console.log(response);
        navigate(response);
    }

    async function handleDelete() {
        const payload = {title, body};
        const requestedLocation = {
            selectedId: location.selectedId,
            isEditing: false,
            searchText: location.searchText,
        };
        const endpoint = `http://localhost:4000/notes/${location.selectedId}`;
        const method = `DELETE`;
        const response = await fetch(
            `${endpoint}?location=${encodeURIComponent(JSON.stringify(requestedLocation))}`,
            {
                method,
                body: JSON.stringify(payload),
                headers: {
                    'Content-Type': 'application/json',
                },
            }
        );
        console.log(response);
        navigate(response);
    }

    return (
        <form onSubmit={(e) => e.preventDefault()}>
            <input
                type="text"
                value={title}
                onChange={(e) => {
                    setTitle(e.target.value);
                }}
            />
            <input
                type="text"
                value={body}
                onChange={(e) => {
                    setBody(e.target.value);
                }}
            />
            <button
                onClick={() => {
                    handleCreate();
                }}>
                Create
            </button>
            <button
                onClick={() => {
                    handleUpdate();
                }}>
                Update id={location.selectedId}
            </button>
            <button
                onClick={() => {
                    handleDelete();
                }}>
                Delete id={location.selectedId}
            </button>
        </form>
    );
}

src / App.server.js (change) Describe the created Former (server component).

<Former /> Give a key to the parent element of. The key is needed for React to identify which elements have been changed / added / deleted.
In the following <section></section> we used it, <div></div> but okay.

import {Suspense} from 'react';

import Hello from './Hello.server';
import World from './World.server';
import Right from "./Right.client";
import Former from "./Former.server";

export default function App({selectedId, isEditing, searchText}) {
    return (
        <div className="main">
            <Hello selectedId={selectedId} />
            <Suspense fallback={<Right text={"This is suspense."} />}>
                <World selectedId={selectedId} />
            </Suspense>

            <section key={selectedId}>
                <Former selectedId={selectedId} isEditing={isEditing} />
            </section>
        </div>
    );
}

Use an external DB

Modify credentials.js.

credentials.js

Example: Use ec2-18-181-96-11.ap-northeast-1.compute.amazonaws.comthe DB of.

module.exports = {
  host: 'ec2-18-181-96-11.ap-northeast-1.compute.amazonaws.com',
  database: 'notesapi',
  user: 'notesadmin',
  password: 'password',
  port: '5432',
};

Change the port of the web server (express)

This is an example of number 80.

Change server / api.server.js to 80.

const PORT = 80;

If you are using Docker, also change the docker-compose.yml setting to 80.

    ports:
      - '80:80'
    environment:
      PORT: 80

In addition, change the part (endpoint) that uses the REST API to 80.

fetch(`http://localhost:80/notes/...`)

Since it is number 80, it can be omitted.

About scale out

I tried a simple verification.
The bottom line is that you can scale out in the usual way.

inspection

Deploy the React Server Components demo on three Amazon Linux2 (EC2) machines.

DB
ec2-18-181-96-11.ap-northeast-1.compute.amazonaws.com:5432
Web server 1
http://ec2-52-192-75-244.ap-northeast-1.compute.amazonaws.com:4000/
The DB connection destination has been changed.

module.exports = {
  host: 'ec2-18-181-96-11.ap-northeast-1.compute.amazonaws.com',
  database: 'notesapi',
  user: 'notesadmin',
  password: 'password',
  port: '5432',
};

Web server 2
http://ec2-54-238-209-222.ap-northeast-1.compute.amazonaws.com:4000/
The DB connection destination has been changed.

module.exports = {
  host: 'ec2-18-181-96-11.ap-northeast-1.compute.amazonaws.com',
  database: 'notesapi',
  user: 'notesadmin',
  password: 'password',
  port: '5432',
};

Then use Route 53 to configure the request to be routed (DNS round robin).

rsc-demo.cmsvr.live

Type: A

Value:
52.192.75.244
54.238.209.222

I will try to access it with this.
Example
http://rsc-demo.cmsvr.live:4000/

I think it works as expected.

This is because it sends the client state to the server like a normal SSR.
Specifically, the following values in the argument of App are set to query of URL and X-Location of Header to maintain consistency.

{selectedId, isEditing, searchText}

However, the cache handling in the demo may require some ingenuity.

to be continued

What did you think?
I was able to create an original component and register / update / delete data.
I also experienced the experimental features that are said to be for React Server Components, as described in TIPS.
Next time, I will explain Relay + GraphQL in the server component.

DEV Community: VTeacher

The Vibe Design Wave, Continued 🌊 Claude Design Is Finally Here—Time to Graduate from Figma

Trying it out

Using the design system

Sending it to Claude Code

Final thoughts

React v19 Sample Code Examples

React 19 Sample Code

Repository (GitHub)

Live Demo (Vercel)

Explanation of Sample Code

1. useTransition

Behavior:

Live Demo:

2. useActionState

How to use useActionState

Live Demo:

3. <form> Action

Live Demo:

4. useFormStatus

Live Demo:

5. useOptimistic

Live Demo:

6. use

Live Demo:

7. useActionState and useOptimistic

Live Demo:

8. React Server Components

Live Demo:

9. Server Functions

Live Demo:

10. ref via Props

Live Demo:

Wow! How to easily introduce GlobalState with AppRouter (RSC) and share the state across SC, CC, and ServerActions.

Introduction

local environment

Repository

Environment variables (.env)

boot

Folder structure

Introduce global state

Install nrstate

Determine the state of the entire page

Create PageState

Implement a provider for PageState.

Set the value for PageState

ClientComponent

Get value from PageState

ClientComponent

ServerComponent

ServerActions

Explicitly remove PageState

Operation confirmation

lastly

Wow! Server Actions are now Stable from Next.js 14! Dramatic changes in React and Next's form

Next.js Conf

What is Server Actions?

A discussion of the direction React/Next is heading

Server Actions Overview

What we tried to make

Documents

Try it out

Case 1: The simplest Server Actions

Case2: Server Actions using formAction

Case3: Call Server Actions from client component

Case4: Getting a value from Page({ params }).

Validation: Checking form values

Pattern without FormData

In the end

Next13 /app Reacet Server Comonents

RSC

Learn more

RSC demo app

RSC that does not think too hard

Example

STEP1. Draw component tree with component first

STEP2. Decide on server components

Components that should be server-side rendered

(1) Waterfall Perspective

(2) Bundle size perspective

1. `useTransition`

2. `useActionState`

How to use `useActionState`

3. `<form>` Action

4. `useFormStatus`

5. `useOptimistic`

6. `use`

7. `useActionState` and `useOptimistic`

10. `ref` via Props

Case4: Getting a value from `Page({ params })`.

Pass values from client component to server component