Sandpack项目中的服务端渲染(SSR)实现指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01101/article/details/148505106

Sandpack项目中的服务端渲染(SSR)实现指南

sandpack A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox. 项目地址: https://gitcode.com/gh_mirrors/sa/sandpack

什么是Sandpack的服务端渲染

Sandpack作为一个强大的代码沙箱组件库，其服务端渲染(SSR)功能通过getSandpackCssText方法实现。这个方法会返回Sandpack所需的CSS字符串，确保在服务端渲染时样式能够正确加载。

核心原理与技术实现

Sandpack底层使用了stitches/core这个CSS-in-JS库，它能够高效地生成和管理主题变量，并确保CSS输出的轻量化和一致性。getSandpackCssText方法正是利用这一特性，提取出所有必要的CSS规则。

import { getSandpackCssText } from "@codesandbox/sandpack-react";

const cssTextOutput = getSandpackCssText();

最佳实践建议

为了获得最佳的水合(hydration)效果，强烈建议在style标签中添加id="sandpack"属性。这有助于框架更高效地管理样式。

主流框架集成方案

Next.js (App Router模式)

在Next.js的App Router模式下，我们需要创建一个客户端组件来处理样式注入：

// components/sandpack-styles.tsx
"use client";

import { getSandpackCssText } from "@codesandbox/sandpack-react";
import { useServerInsertedHTML } from "next/navigation";

export const SandPackCSS = () => {
  useServerInsertedHTML(() => {
    return (
      <style
        dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
        id="sandpack"
      />
    );
  });
  return null;
};

然后在布局文件中引入：

// app/layout.tsx
import { SandPackCSS } from "@/components/sandpack-styles";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <SandPackCSS />
      </head>
      <body>{children}</body>
    </html>
  );
}

Next.js (Pages Router模式)

对于传统的Pages Router模式，修改_document.tsx文件：

// pages/_document.tsx
import { getSandpackCssText } from "@codesandbox/sandpack-react";
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <style
          dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
          id="sandpack"
          key="sandpack-css"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Gatsby集成方案

在Gatsby项目中，通过修改gatsby-ssr.js文件实现：

// gatsby-ssr.js
import * as React from "react";
import { getSandpackCssText } from "@codesandbox/sandpack-react";

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <style
      id="sandpack"
      key="sandpack-css"
      dangerouslySetInnerHTML={{
        __html: getSandpackCssText(),
      }}
    />,
  ]);
};