docs: Add server component example to REST intro

Author: ntucker

docs/core/api/useSuspense.md

@@ -239,7 +239,7 @@ render(<ProfileList />);
 
 Reactive [pagination](/rest/guides/pagination) is achieved with [mutable schemas](/rest/api/Collection)
 
-<PaginationDemo />
+<PaginationDemo defaultTab="PostList" />
 
 ### Sequential
 

docs/core/getting-started/data-dependency.md

@@ -157,21 +157,26 @@ function Navigation() {
   if (route.startsWith('detail'))
     return <PostDetail setRoute={setRoute} id={route.split('/')[1]} />;
 
-  return <><PostList setRoute={setRoute} /><LoadMore /></>;
+  return (
+    <>
+      <PostList setRoute={setRoute} />
+      <LoadMore />
+    </>
+  );
 }
 
 function LoadMore() {
   const ctrl = useController();
   const posts = useQuery(PostResource.getList.schema);
-  const [nextPage, isPending] = useLoading(
-    () => ctrl.fetch(PostResource.getList.getPage, { page: 2 }),
+  const [nextPage, isPending] = useLoading(() =>
+    ctrl.fetch(PostResource.getList.getPage, { page: 2 }),
   );
   if (!posts || posts.length % 3 !== 0) return null;
   return (
     <center>
-      <button onClick={nextPage}>{isPending ? "..." : 'Load more'}</button>
+      <button onClick={nextPage}>{isPending ? '...' : 'Load more'}</button>
     </center>
-  )
+  );
 }
 render(<Navigation />);
 ```
@@ -252,7 +257,7 @@ import { ProfileResource } from './ProfileResource';
 function ProfileList(): JSX.Element {
   const { data, loading, error } = useDLE(ProfileResource.getList);
   if (error) return <div>Error {`${error.status}`}</div>;
-  if (loading || !data) return <Loading/>;
+  if (loading || !data) return <Loading />;
   return (
     <div>
       {data.map(profile => (

docs/core/guides/ssr.md

@@ -57,7 +57,7 @@ To keep your data fresh and performant, you can use client components and [useSu
 ```tsx title="app/todos/[userId]/page.tsx"
 'use client';
 import { useSuspense } from '@data-client/react';
-import { TodoResource } from '../../resources/Todo';
+import { TodoResource } from '@/resources/Todo';
 
 export default function InteractivePage({ params }: { params: { userId: number } }) {
   const todos = useSuspense(TodoResource.getList, params);
@@ -74,7 +74,7 @@ However, if your data never changes, you can slightly decrease the javascript bu
 using a server component. Simply `await` the endpoint:
 
 ```tsx title="app/todos/[userId]/page.tsx"
-import { TodoResource } from '../../resources/Todo';
+import { TodoResource } from '@/resources/Todo';
 
 export default async function StaticPage({ params }: { params: { userId: number } }) {
   const todos = await TodoResource.getList(params);

docs/core/shared/_pagination.mdx

@@ -1,7 +1,7 @@
 import { postPaginatedFixtures } from '@site/src/fixtures/posts';
 import HooksPlayground from '@site/src/components/HooksPlayground';
 
-<HooksPlayground defaultOpen="n" row fixtures={postPaginatedFixtures}>
+<HooksPlayground defaultOpen="n" row fixtures={postPaginatedFixtures} defaultTab={props.defaultTab}>
 
 ```ts title="User" collapsed
 import { Entity } from '@data-client/rest';
@@ -73,30 +73,44 @@ interface Props {
 }
 ```
 
-```tsx title="PostList" {9}
+```tsx title="LoadMore" {7}
+import { useController, useLoading } from '@data-client/react';
+import { PostResource } from './Post';
+
+export default function LoadMore({ cursor }: { cursor: string }) {
+  const ctrl = useController();
+  const [loadPage, isPending] = useLoading(
+    () => ctrl.fetch(PostResource.getList.getPage, { cursor }),
+    [cursor],
+  );
+  return (
+    <center>
+      <button onClick={loadPage} disabled={isPending}>
+        {isPending ? '...' : 'Load more'}
+      </button>
+    </center>
+  );
+}
+```
+
+```tsx title="PostList" {7} collapsed
 import { useSuspense } from '@data-client/react';
 import PostItem from './PostItem';
+import LoadMore from './LoadMore';
 import { PostResource } from './Post';
 
 export default function PostList() {
   const { posts, cursor } = useSuspense(PostResource.getList);
-  const ctrl = useController();
-  const handlePageLoad = () =>
-    ctrl.fetch(PostResource.getList.getPage, { cursor });
   return (
     <div>
       {posts.map(post => (
         <PostItem key={post.pk()} post={post} />
       ))}
-      {cursor ? (
-        <center>
-          <button onClick={handlePageLoad}>Load more</button>
-        </center>
-      ) : null}
+      {cursor ? <LoadMore cursor={cursor} /> : null}
     </div>
   );
 }
 render(<PostList />);
 ```
 
-</HooksPlayground>
+</HooksPlayground>

docs/rest/README.md

@@ -14,7 +14,7 @@ import TypeScriptEditor from '@site/src/components/TypeScriptEditor';
 
 <PkgTabs pkgs="@data-client/rest" />
 
-## Define the API
+## Define the Resources
 
 [Resources](./api/resource.md) are a collection of `methods` for a given `data model`. [Entities](./api/Entity.md) and [Schemas](./api/schema.md) are the declarative _data model_.
 [RestEndpoint](./api/RestEndpoint.md) are the [_methods_](<https://en.wikipedia.org/wiki/Method_(computer_programming)>) on
@@ -142,19 +142,20 @@ TypeScript enforces the arguments specified with a prefixed colon like `:slug` i
 ArticleResource.get({ slug: 'use-reactive-data-client' });
 ```
 
-## Bind the data with Suspense
+## Render the data
 
 <Tabs
 defaultValue="Single"
 values={[
 { label: 'Single', value: 'Single' },
 { label: 'List', value: 'List' },
+{ label: 'Server Component', value: 'server' },
 ]}>
 <TabItem value="Single">
 
 ```tsx
 import { useSuspense } from '@data-client/react';
-import { ArticleResource } from 'api/article';
+import { ArticleResource } from '@/resources/Article';
 
 export default function ArticleDetail({ slug }: { slug: string }) {
   const article = useSuspense(ArticleResource.get, { slug });
@@ -167,16 +168,22 @@ export default function ArticleDetail({ slug }: { slug: string }) {
 }
 ```
 
+:::info
+
+[useSuspense()](/docs/api/useSuspense) acts like [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await), ensuring the data is available before returning. [Learn how to be declare your data dependencies](/docs/getting-started/data-dependency)
+
+:::
+
 </TabItem>
 <TabItem value="List">
 
 ```tsx
 import { useSuspense } from '@data-client/react';
-import { ArticleResource } from 'api/article';
+import { ArticleResource } from '@/resources/Article';
 import ArticleSummary from './ArticleSummary';
 
-export default function ArticleList() {
-  const articles = useSuspense(ArticleResource.getList);
+export default function ArticleList({ userId }: { userId?: number }) {
+  const articles = useSuspense(ArticleResource.getList, { userId });
   return (
     <section>
       {articles.map(article => (
@@ -187,11 +194,41 @@ export default function ArticleList() {
 }
 ```
 
-</TabItem>
-</Tabs>
+:::info
 
 [useSuspense()](/docs/api/useSuspense) acts like [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await), ensuring the data is available before returning. [Learn how to be declare your data dependencies](/docs/getting-started/data-dependency)
 
+:::
+
+</TabItem>
+<TabItem value="server">
+
+```tsx title="app/articles/[userId]/page.tsx"
+import { useSuspense } from '@data-client/react';
+import { ArticleResource } from '@/resources/Article';
+import ArticleSummary from './ArticleSummary';
+
+export default async function ArticleList({ params }: { params: { userId: number } }) {
+  const articles = await ArticleResource.getList(params);
+  return (
+    <section>
+      {articles.map(article => (
+        <ArticleSummary key={article.pk()} article={article} />
+      ))}
+    </section>
+  );
+}
+```
+
+:::warning
+
+[Server Components](/docs/guides/ssr#server-components) makes the data static and un-mutable.
+
+:::
+
+</TabItem>
+</Tabs>
+
 ## Mutate the data
 
 <Tabs
@@ -205,7 +242,7 @@ values={[
 
 ```tsx title="NewArticleForm.tsx"
 import { useController } from '@data-client/react';
-import { ArticleResource } from 'api/article';
+import { ArticleResource } from '@/resources/Article';
 
 export default function NewArticleForm() {
   const ctrl = useController();
@@ -231,7 +268,7 @@ resolves to the new Resource created by the API. It will automatically be added
 
 ```tsx title="UpdateArticleForm.tsx"
 import { useController } from '@data-client/react';
-import { ArticleResource } from 'api/article';
+import { ArticleResource } from '@/resources/Article';
 
 export default function UpdateArticleForm({ slug }: { slug: string }) {
   const article = useSuspense(ArticleResource.get, { slug });
@@ -260,7 +297,7 @@ resolves to the new Resource created by the API. It will automatically be added
 
 ```tsx title="ArticleWithDelete.tsx"
 import { useController } from '@data-client/react';
-import { Article, ArticleResource } from 'api/article';
+import { Article, ArticleResource } from '@/resources/Article';
 
 export default function ArticleWithDelete({
   article,

examples/github-app/src/pages/NextPage.tsx

@@ -5,15 +5,15 @@ import { IssueResource } from '@/resources/Issue';
 
 export default function NextPage({ q, page }: Props) {
   const ctrl = useController();
-  const [loadMore, loading] = useLoading(() =>
+  const [loadMore, isPending] = useLoading(() =>
     ctrl.fetch(IssueResource.search.getPage, {
       page,
       q,
     }),
   );
   return (
     <div style={{ textAlign: 'center', marginTop: 12 }}>
-      {loading ? 'loading...' : <Button onClick={loadMore}>Load more</Button>}
+      {isPending ? 'loading...' : <Button onClick={loadMore}>Load more</Button>}
     </div>
   );
 }

website/src/fixtures/posts.ts

@@ -234,6 +234,9 @@ export const postPaginatedFixtures = [
         cursor: cursor + 1,
       };
     },
+    delay: (...args) => {
+      return args?.[0]?.cursor ? 200 : 0;
+    },
   },
 ];