MDX 按需

¥MDX on demand

本指南介绍如何使用 @mdx-js/mdx 在服务器上编译 MDX 并在客户端上运行结果。 有些框架，例如 Next.js 和 Remix，可以轻松地在服务器和客户端之间分配工作。例如，使用它可以在服务器上按需完成大部分工作，而不是在构建时完成，然后将结果数据传递给客户端，最终在客户端使用它。

¥This guide shows how to use @mdx-js/mdx to compile MDX on the server and run the result on clients. Some frameworks, such as Next.js and Remix, make it easy to split work between servers and clients. Using that it’s possible to for example do most of the work on demand on the server instead of at build time, then pass the resulting data to clients, where they finally use it.

这类似于人们有时使用 mdx-bundler 或 next-mdx-remote 的用途，但 MDX 也支持它。

¥This is similar to what people sometimes use mdx-bundler or next-mdx-remote for, but MDX also supports it.

快速示例

¥Quick example

在服务器上：

¥On the server:

import {compile} from '@mdx-js/mdx'

const code = String(await compile('# hi', {
  outputFormat: 'function-body',
  /* …otherOptions */
}))
// To do: send `code` to the client somehow.

在客户端：

¥On the client:

import {run} from '@mdx-js/mdx'
import * as runtime from 'react/jsx-runtime'

const code = '' // To do: get `code` from server somehow.

const {default: Content} = await run(code, {...runtime, baseUrl: import.meta.url})

Content 现在是 MDXContent 组件，你可以像平常一样在框架中使用它（请参阅 § 使用 MDX）。

¥Content is now an MDXContent component that you can use like normal in your framework (see § Using MDX).

更多信息可在 @mdx-js/mdx 的 compile 和 run 的 API 文档中找到。对于其他用例，你还可以使用 evaluate，它可以同时编译和运行。

¥More information is available in the API docs of @mdx-js/mdx for compile and run. For other use cases, you can also use evaluate, which both compiles and runs in one.

Next.js 示例

¥Next.js example

有些框架允许你将服务器和客户端代码编写在一个文件中，例如 Next。

¥Some frameworks let you write the server and client code in one file, such as Next.

import {compile, run} from '@mdx-js/mdx'
import {Fragment, useEffect, useState} from 'react'
import * as runtime from 'react/jsx-runtime'

export default function Page({code}) {
  const [mdxModule, setMdxModule] = useState()
  const Content = mdxModule ? mdxModule.default : Fragment

  useEffect(function () {
    ;(async function () {
      setMdxModule(await run(code, {...runtime, baseUrl: import.meta.url}))
    })()
  }, [code])

  return <Content />
}

export async function getStaticProps() {
  const code = String(
    await compile('# hi', {
      outputFormat: 'function-body',
      /* …otherOptions */
    })
  )
  return {props: {code}}
}