如何在next.js v13中完全禁用服务器端渲染？

sycxhyv7 于 2023-02-12 发布在其他

关注(0)|答案(2)|浏览(795)

文档中说，我可以通过将'use client'添加到只需要在客户端呈现的文件的顶部来禁用服务器端呈现。
然而，实际上，我已经将这个头文件添加到项目中的每个文件中，并且我看到Layout和Page都在服务器端呈现。
我可以用一个简单的页面来确认这一点：

'use client';

export default () => {
  console.log('SERVER RENDER (page)');

  return (
    <div>test</div>
  );
};

我希望next dev不输出“服务器渲染（页面）"，但它确实输出了。

next.js

来源：https://stackoverflow.com/questions/75406728/how-to-entirely-disable-server-side-rendering-in-next-js-v13

2条答案

按热度按时间

wmomyfyw1#

您不需要禁用服务器端呈现（SSR），因为在Next.js中默认情况下没有启用它。
它使用静态生成或SSR预先呈现每个页面，除非另有说明。
1.静态生成。HTML在构建时生成，并将在每次请求时重用。

SSR。HTML在每个请求上生成。
Next.js尽可能使用静态生成。
在您的示例中，SSR没有发生。您在终端中看到SERVER RENDER (page)消息是因为您在dev（next dev）模式下运行它。在dev模式下，没有构建完成，因此页面是在运行中生成的。在生产模式下，您不会看到此消息。有关详细信息，请参见this。
使用use client;指令不会改变上述情况，它只是告诉Next.js某个组件是客户端组件，该组件仍将被预呈现。

赞(0）回复(0）举报 2023-02-12

qnakjoqk2#

看起来即使组件被标记为'use client'，它仍然会被预渲染。
客户端组件使您能够为应用程序添加客户端交互性。在Next.js中，它们在服务器上预呈现，在客户端上水合。您可以将客户端组件视为Next.js 12和以前版本的工作方式（即页面/目录）。
https://beta.nextjs.org/docs/rendering/server-and-client-components#client-components
@Nikolai正确地指出了这一点，但没有回答如何禁用SSR。
但是，既然我们知道Next 13的行为与12相同，我们也可以应用以前版本中使用的相同hydration workaround。
TLDR是指您希望将布局 Package 在一个组件中，该组件根据是否检测到浏览器环境来有条件地呈现元素，例如

const Dynamic = ({ children }: { children: React.ReactNode }) => {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) {
    return null;
  }

  return <>{children}</>;
};

export default ({ children }: { children: React.ReactNode }) => {
  return (
    <html lang="en">
      <head />
      <body>
        <Dynamic>{children}</Dynamic>
      </body>
    </html>
  );
};

显然，要确保你知道自己在做什么。这通常不是你想要的行为，尽管也有例外。

赞(0）回复(0）举报 2023-02-12

我来回答

如何在next.js v13中完全禁用服务器端渲染？

2条答案

相关问题

热门标签

最新问答