chore: fix RSC demo (#1635)

Author: ascorbic

demos/server-components/components/comment.js

@@ -14,6 +14,7 @@ export default class Comment extends React.Component {
     return (
       <div className="comment">
         <div className="meta">
+          {/* TODO: time hydration mismatch */}
           {user} {timeAgo(new Date(date))} ago{' '}
           <span onClick={this.toggle} className="toggle">
             {this.state.toggled

demos/server-components/components/meta.js

@@ -1,5 +1,4 @@
 import Head from 'next/head'
-// import Router from 'next/router'
 
 export default function Meta() {
   return (

demos/server-components/package.json

@@ -11,7 +11,7 @@
   "private": true,
   "dependencies": {
     "ms": "2.1.3",
-    "next": "^12.2.1",
+    "next": "12.2.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

demos/server-components/pages/csr.js

@@ -12,7 +12,9 @@ import Skeletons from '../components/skeletons'
 
 function StoryWithData({ id }) {
   if (typeof window === 'undefined') return <Skeletons />
-  const { data } = useData(`s-${id}`, () => fetchData(`item/${id}`).then(transform))
+  const { data } = useData(`s-${id}`, () =>
+    fetchData(`item/${id}`).then(transform)
+  )
   return <Story {...data} />
 }
 
@@ -48,7 +50,3 @@ export default function News() {
     </Page>
   )
 }
-
-export const config = {
-  runtime: 'experimental-edge',
-}

demos/server-components/pages/item.server.js

@@ -1,4 +1,3 @@
-
 import ItemPage from '../components/item.server'
 
 export default function Item({ id }) {

demos/server-components/pages/rsc.server.js

@@ -18,12 +18,16 @@ import { transform } from '../lib/get-item'
 import useData from '../lib/use-data'
 
 function StoryWithData({ id }) {
-  const { data } = useData(`s-${id}`, () => fetchData(`item/${id}`).then(transform))
+  const { data } = useData(`s-${id}`, () =>
+    fetchData(`item/${id}`).then(transform)
+  )
   return <Story {...data} />
 }
 
 function NewsWithData() {
-  const { data: storyIds, error } = useData('top', () => fetchData('topstories'))
+  const { data: storyIds, error } = useData('top', () =>
+    fetchData('topstories')
+  )
   return (
     <>
       {error ? <ErrorPlaceholder error={error} /> : null}

demos/server-components/pages/slow.server.js

@@ -15,7 +15,9 @@ import useData from '../lib/use-data'
 import Skeletons from '../components/skeletons'
 
 function StoryWithData({ id }) {
-  const { data } = useData(`s-${id}`, () => fetchData(`item/${id}`).then(transform))
+  const { data } = useData(`s-${id}`, () =>
+    fetchData(`item/${id}`).then(transform)
+  )
   return <Story {...data} />
 }