添加服务端运行警告

astro.config.mjs

@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from 'astro/config'
+import { defineConfig, envField } from 'astro/config'
 
 import node from '@astrojs/node'
 import svelte from '@astrojs/svelte'
@@ -29,4 +29,15 @@ export default defineConfig({
       },
     },
   },
+
+  // 环境变量管理
+  env: {
+    schema: {
+      LEGACY_BACKEND_URL_SSR: envField.string({
+        context: 'server',
+        access: 'secret',
+        default: 'https://legacy.passthem.top/api',
+      }),
+    },
+  },
 })

src/components/MarkdocRenderer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Markdoc, { type RenderableTreeNode } from '@markdoc/markdoc'
-import { toMarkdocTree } from '../lib/markdoc'
+import { renderMarkdocTree } from '../lib/markdoc'
 import { CodeBlock } from './markdoc/CodeBlock.tsx'
 
 export const MarkdocContent: React.FC<{
@@ -11,7 +11,7 @@ export const MarkdocContent: React.FC<{
 
   useEffect(() => {
     let active = true
-    toMarkdocTree(content).then((result) => {
+    renderMarkdocTree(content).then((result) => {
       if (active) setTree(result)
     })
     return () => {

src/lib/markdoc-cache.server.ts

@@ -1,3 +1,5 @@
+import './server-only.ts'
+
 import type { RenderableTreeNode } from '@markdoc/markdoc'
 import KeyV from 'keyv'
 import { createHash } from 'node:crypto'

src/lib/markdoc.server.ts

@@ -0,0 +1,21 @@
+import './server-only.ts'
+
+import { renderMarkdocTree } from './markdoc.ts'
+import { generateCacheKey, markdocCache } from './markdoc-cache.server.ts'
+
+export const getCachedMarkdocTree = async (content: string) => {
+  if (!import.meta.env.SSR) {
+    return await renderMarkdocTree(content)
+  }
+
+  const key = generateCacheKey(content)
+  const cached = await markdocCache.get(key)
+
+  if (cached) {
+    return cached
+  }
+
+  const tree = await renderMarkdocTree(content)
+  markdocCache.set(key, tree)
+  return tree
+}

src/lib/markdoc.ts

@@ -38,28 +38,10 @@ export const markdocConfig: Config = {
   },
 }
 
-const _toMarkdocTree = async (content: string) => {
+export const renderMarkdocTree = async (content: string) => {
   const ast = Markdoc.parse(content)
   await ensureShikiEngine()
   const tree = Markdoc.transform(ast, markdocConfig)
 
   return tree
 }
-
-export const toMarkdocTree = async (content: string) => {
-  if (!import.meta.env.SSR) {
-    return await _toMarkdocTree(content)
-  }
-
-  const cacheLib = await import('./markdoc-cache.ts')
-  const key = cacheLib.generateCacheKey(content)
-  const cached = await cacheLib.markdocCache.get(key)
-
-  if (cached) {
-    return cached
-  }
-
-  const tree = await _toMarkdocTree(content)
-  cacheLib.markdocCache.set(key, tree)
-  return tree
-}

src/lib/server-only.ts

@@ -0,0 +1,3 @@
+if (!import.meta.env.SSR) {
+  throw Error('这段代码不可以在客户端执行！')
+}

src/pages/blogs/[blog_id].astro

@@ -2,7 +2,7 @@
 import { getBlog } from '../../lib/apis/legacy/blog'
 import FullLayoutV1 from '../../layout/FullLayoutV1.astro'
 import { MarkdocTreeRender } from '../../components/MarkdocRenderer.tsx'
-import { toMarkdocTree } from '../../lib/markdoc'
+import { getCachedMarkdocTree } from '../../lib/markdoc.server.ts'
 import { Image } from 'astro:assets'
 import { Icon } from 'astro-icon/components'
 
@@ -29,7 +29,7 @@ if (blogData === null) {
   return Astro.redirect('/404')
 }
 
-const tree = await toMarkdocTree(blogData.content)
+const tree = await getCachedMarkdocTree(blogData.content)
 const formatDate = (date: Date) =>
   `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
 ---