Fix insecure dynamic Function issue and switch to edge runtime

README.md

@@ -39,6 +39,10 @@ You can quickly deploy the demo to Vercel by clicking this link:
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fserver-components-notes-demo&env=REDIS_URL,SESSION_KEY,OAUTH_CLIENT_KEY,OAUTH_CLIENT_SECRET&project-name=next-rsc-notes&repo-name=next-rsc-notes&demo-title=React%20Server%20Components%20(Experimental%20Demo)&demo-description=Experimental%20demo%20of%20React%20Server%20Components%20with%20Next.js.%20&demo-url=https%3A%2F%2Fnext-rsc-notes.vercel.app&demo-image=https%3A%2F%2Fnext-rsc-notes.vercel.app%2Fog.png)
 
+## Technical Details
+
+This Next.js application uses React 18 (RC build) and the new [Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime). It has `runtime` set to `'edge'` and feature flag `serverComponents` enabled. You can check out [next.config.js](https://github.com/vercel/next-server-components/blob/main/next.config.js) for more details.
+
 ## License
 
 This demo is MIT licensed.

components/Page.server.js

@@ -9,8 +9,8 @@ export default function Page({ children, searchText = '', login }) {
   return (
     <div className="container">
       <div className="banner">
-        <a href="https://nextjs.org/blog/next-12" target="_blank">
-          Learn more about it with next.js →
+        <a href="https://nextjs.org/docs/advanced-features/react-18" target="_blank">
+          Learn more about using React Server Components in Next.js →
         </a>
       </div>
       <div className="main">

components/SidebarNote.server.js

@@ -6,21 +6,31 @@
  *
  */
 
-// FIXME: This is a temporary workaround for unsupported hooks in rsc
-// renamed SidebarNote to SidebarNote.server
 import React from 'react'
 import { format, isToday } from 'date-fns'
-import excerpts from 'excerpts'
+import cheerio from 'cheerio'
 import marked from 'marked'
-
 import ClientSidebarNote from './SidebarNote.client'
 
+function excerpts(html, length) {
+  const text = cheerio.load(html).text().trim()
+    .replace(/(\r\n|\r|\n|\s)+/g, ' ')
+
+  let excerpt = ''
+  if (length) {
+    excerpt = text.split(' ').slice(0, length).join(' ')
+  }
+  if (excerpt.length < text.length) excerpt += '...'
+
+  return excerpt
+}
+
 export default function SidebarNote({ note }) {
   const updatedAt = new Date(note.updated_at)
   const lastUpdatedAt = isToday(updatedAt)
     ? format(updatedAt, 'h:mm bb')
     : format(updatedAt, 'M/d/yy')
-  const summary = excerpts(marked(note.body || ''), { words: 20 })
+  const summary = excerpts(marked(note.body || ''), 20)
   return (
     <ClientSidebarNote
       id={note.id}

next.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   experimental: {
-    runtime: 'nodejs',
+    runtime: 'edge',
     serverComponents: true,
   },
 }

package.json

@@ -9,11 +9,11 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "cheerio": "^1.0.0-rc.10",
     "date-fns": "^2.16.1",
-    "excerpts": "^0.0.3",
     "ioredis": "^4.19.4",
     "marked": "^1.2.7",
-    "next": "^12.0.11-canary.18",
+    "next": "^12.0.11-canary.21",
     "oauth": "^0.9.15",
     "react": "^18.0.0-rc.0",
     "react-dom": "^18.0.0-rc.0",

pages/_app.js

@@ -9,11 +9,11 @@ export default function MyApp({ Component, pageProps }) {
         <meta httpEquiv="Content-Language" content="en" />
         <meta
           name="description"
-          content="Experimental demo of React Server Components with Next.js. Hosted on Vercel."
+          content="Experimental demo of React Server Components in Next.js. Hosted on Vercel."
         />
         <meta
           name="og:description"
-          content="Experimental demo of React Server Components with Next.js. Hosted on Vercel."
+          content="Experimental demo of React Server Components in Next.js. Hosted on Vercel."
         />
         <meta name="twitter:card" content="summary_large_image" />
         <meta