为何Next.js显示<template>标签而非组件？如何实现SSR直接渲染HTML？

问题原因 #

你代码里的getServerData()是标记了"use server"的异步函数，在Next.js中，服务器组件直接调用带use server的函数会触发动态渲染降级——Next.js会判定该页面无法在服务器端完成完整渲染，于是用<template>标签占位，等客户端 hydration 阶段再执行组件渲染。

本质是use server标记的函数默认在服务器的请求处理阶段执行，而非SSR的页面渲染阶段，导致服务器无法提前生成完整HTML，只能用占位符替代。

实现SSR直接渲染HTML的方法 #

方法一：移除use server，用服务器组件原生异步获取数据 #

服务器组件本身支持顶层await，无需use server标记即可实现服务器端数据获取，调整代码如下：

export default async function FooPage() {
  // 直接编写服务器端数据获取逻辑
  const res = await fetch('你的API地址', { cache: 'force-cache' });
  const data = await res.json();

  return <div>Foo</div>;
}

这样Next.js会在SSR阶段完成数据获取和HTML渲染，不会生成占位标签。

方法二：Pages Router下使用getServerSideProps #

如果你的页面在pages/目录下，改用getServerSideProps来获取数据：

export async function getServerSideProps() {
  const { data } = await getServerData();
  return { props: { data } };
}

export default function FooPage({ data }) {
  return <div>Foo</div>;
}

getServerSideProps会在SSR阶段执行数据获取，确保服务器能生成完整HTML返回。

方法三：保留use server但调整调用方式 #

若必须保留getServerData()的use server标记，需确保它在服务器组件的顶层直接调用，且不要在客户端组件中作为回调使用。同时确认使用的是App Router的稳定版本，避免版本兼容问题。

内容的提问来源于stack exchange，提问作者Yanick Rochon