NextJS组件未导出getServerSideProps仍服务端渲染原因咨询

结合你的场景，以下是除getServerSideProps外，组件被服务端渲染的常见原因：

• Pages Router默认预渲染机制：src/pages下的所有页面组件，默认都会执行预渲染（静态生成SSG或增量静态再生ISR）。页面引用的所有子组件（比如你的Header、Sidebar、ViewportContext）会跟着在服务端执行一次，所以组件里的console.log()会出现在终端。这是Pages Router的核心特性，和是否导出getServerSideProps无关——getServerSideProps只是强制每次请求都做SSR，而默认的预渲染在构建时或首次请求时就会执行服务端渲染。

• 组件未标记为客户端组件：NextJS 13开始引入了'use client'指令，即使在Pages Router中，未添加该指令的组件会默认参与服务端预渲染。如果你的组件只需要在客户端运行（比如依赖window的ViewportContext），必须在组件顶部添加'use client'，强制组件仅在客户端执行，避免服务端渲染时出现window is undefined的错误。

• 组件被SSR/SSG页面引用：只要组件被任何一个预渲染的页面（无论用SSG还是SSR）引入，它就会跟着页面在服务端执行渲染逻辑。比如你的Index.tsx是pages目录下的页面，默认是SSG，它引用的所有子组件都会在服务端跑一遍。

另外针对你的ViewportContext依赖window的问题，建议：

1. 在ViewportContext组件顶部添加'use client'指令；
2. 将依赖window的逻辑放在useEffect钩子中（useEffect仅在客户端执行）；
3. 或者通过typeof window !== 'undefined'做条件判断，避免服务端执行时报错。

内容的提问来源于stack exchange，提问作者Diego Benetti