SSR框架中实现window对象属性挂载的最佳实践

2025-06-29 14:29:50作者：傅爽业Veleda

在SSR(服务端渲染)应用开发中，我们经常需要在客户端全局对象window上挂载一些自定义属性或方法。这些属性可能包括应用配置、环境变量、用户信息等需要在客户端共享的数据。本文将详细介绍在SSR框架中实现这一需求的几种技术方案。

为什么需要在window上挂载属性

在SSR应用中，服务端和客户端需要共享某些数据时，将这些数据挂载到window对象上是常见的解决方案。这样做的主要优势包括：

数据可以在客户端任何地方访问
避免了重复的API请求
保持了服务端和客户端数据的一致性
方便第三方库或脚本访问这些数据

实现方案

方案一：通过layout组件注入script标签

在SSR框架中，最推荐的方式是通过layout组件生成script标签来注入全局变量。这种方法具有以下优点：

代码组织清晰，易于维护
可以充分利用SSR的特性
变量注入时机可控

实现示例：

// layout组件中
export default function Layout({ children }) {
  return (
    <html>
      <head>
        <script dangerouslySetInnerHTML={{
          __html: `window.__APP_CONFIG__ = ${JSON.stringify(config)}`
        }} />
      </head>
      <body>
        {children}
      </body>
    </html>
  )
}

方案二：服务端渲染时注入

在服务端渲染过程中，可以直接在HTML模板中注入script标签：

// 服务端渲染逻辑
const html = `
  <!DOCTYPE html>
  <html>
    <head>
      <script>
        window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
      </script>
    </head>
    <body>
      <div id="root">${content}</div>
    </body>
  </html>
`;

方案三：使用框架提供的API

某些SSR框架提供了专门的API来注入全局变量，这种方式更加规范和可控。例如：

// 使用框架API注入
app.useSSRContext(() => ({
  globals: {
    __APP_CONFIG__: config
  }
}));

注意事项

XSS防护：确保注入的数据经过适当的转义处理，防止XSS攻击
数据大小：避免在window上挂载过大的数据，影响页面性能
命名规范：使用特定的前缀(如__APP_*)避免与第三方库冲突
类型安全：在TypeScript项目中，需要扩展Window接口类型定义

最佳实践建议

优先使用框架提供的内置方法
将全局变量集中管理，避免分散在多处
考虑使用更现代的状态管理方案如Context API
对于敏感数据，考虑加密或仅在需要时注入

通过以上方法，开发者可以安全高效地在SSR应用中实现window对象的属性挂载，满足业务需求的同时保证应用的性能和安全性。

ssr

A most advanced ssr framework support React17/React18/Vue2/Vue3 on Earth that implemented serverless-side render specification.

项目地址：https://gitcode.com/gh_mirrors/ssr/ssr

登录后查看全文

项目优选

收起

docs

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

1.03 K

448

openGauss-server

openGauss kernel ~ openGauss is an open source relational database management system

一个用于服务器应用开发的综合工具库。 - 零配置文件 - 环境变量和命令行参数配置 - 约定优于配置 - 深刻利用仓颉语言特性 - 只需要开发动态链接库，fboot负责加载、初始化并运行。

Cangjie

280