docs: More updates to v.13 blog

Author: ntucker

docs/core/api/useDebounce.md

@@ -103,7 +103,7 @@ export default function SearchIssues() {
   const handleChange = e => setQuery(e.currentTarget.value);
   const [debouncedQuery, isPending] = useDebounce(query, 200);
   return (
-    <div>
+    <>
       <TextInput
         spellCheck="false"
         placeholder="Search react issues"
@@ -115,10 +115,10 @@ export default function SearchIssues() {
       >
         <SearchIcon />
       </TextInput>
-      <AsyncBoundary>
+      <AsyncBoundary fallback={<Loading />}>
         <IssueList query={debouncedQuery} owner="facebook" repo="react" />
       </AsyncBoundary>
-    </div>
+    </>
   );
 }
 render(<SearchIssues />);

website/blog/2024-06-17-v0.13-nextjs-app-router-expogo-native.md

@@ -7,11 +7,15 @@ draft: true
 ---
 
 import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 Platforms:
 - NextJS App Router
 - ExpoGo
+
+Packages moved inside:
 - Redux
+- Hooks
 
 **Other Improvements**
 
@@ -49,10 +53,12 @@ While [other fetching methods](https://nextjs.org/docs/app/building-your-applica
 require slow client-side fetching; Reactive Data Client provides the best of both <abbr title="Single Page Application">SPA</abbr> and
 <abbr title="Multi Page Application">MPA</abbr>. [#3074](https://github.com/reactive/data-client/pull/3074), [#3093](https://github.com/reactive/data-client/pull/3093)
 
-<abbr title="Reactive Data Client">Data Client</abbr> performs streaming SSR of the HTML, streamlining the initial
-application load experience. Uniquely, <abbr title="Reactive Data Client">Data Client</abbr> is then immediately interactive
-with 0 client side fetches. This is achieved by initializing the [Client Store](/docs/getting-started/debugging#state-inspection)
-with [normalized data](/docs/concepts/normalization) during the SSR phase.
+Like MPAs, SSR with Data Client means the fastest possible *initial page load*. Like SPAs, Data Client offers faster
+*navigation*, *client side mutations*, and *remote-driven mutations* (like websockets) than MPAs.
+
+Additionally, Data Client with SSR still provides the performance advantages over other client-side
+fetching libraries.
+
 
 <center>
 <div style={{maxWidth:'500px'}}>
@@ -68,6 +74,18 @@ xychart-beta
 
 </div></center>
 
+<center>
+<video width="600" controls>
+  <source src={useBaseUrl('/videos/blog/data-client-nextjs.mp4')} type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+</center>
+
+
+<abbr title="Reactive Data Client">Data Client</abbr> performs streaming SSR of the HTML, streamlining the initial
+application load experience. Uniquely, <abbr title="Reactive Data Client">Data Client</abbr> is then immediately interactive
+with 0 client side fetches. This is achieved by initializing the [Client Store](/docs/getting-started/debugging#state-inspection)
+with [normalized data](/docs/concepts/normalization) during the SSR phase.
 
 #### Usage
 
@@ -95,34 +113,9 @@ export default function RootLayout({ children }) {
 }
 ```
 
-#### Client Components
-
-To keep your data fresh and performant, you can use [client components](https://react.dev/reference/rsc/use-client) and [useSuspense()](../api/useSuspense.md)
-
-```tsx title="app/todos/page.tsx"
-'use client';
-import { useSuspense } from '@data-client/react';
-import { TodoResource } from '../../resources/Todo';
-
-export default function InteractivePage() {
-  const todos = useSuspense(TodoResource.getList);
-  return <TodoList todos={todos} />;
-}
-```
-
-#### Server Components
-
-However, if your data never changes, you can slightly decrease the javascript bundle sent, by
-using a [server component](https://react.dev/reference/rsc/server-components). Simply `await` the endpoint:
-
-```tsx title="app/todos/page.tsx"
-import { TodoResource } from '../../resources/Todo';
-
-export default async function StaticPage() {
-  const todos = await TodoResource.getList();
-  return <TodoList todos={todos} />;
-}
-```
+<p style={{ textAlign: 'center' }}>
+  <Link className="button button--primary" to="../guides/ssr#nextjs">Full NextJS Guide</Link>
+</p>
 
 #### Demo
 

website/src/components/Playground/PreviewBlock.tsx

@@ -12,7 +12,6 @@ export default function PreviewBlock() {
       <Boundary fallback={<Loading />}>
         <LivePreview />
       </Boundary>
-      {/* <Loading /> */}
       <LiveError className={styles.playgroundError} />
     </>
   );