在Next.js中使用非SSR友好组件的方法如何为Next.js中的非SSR友好组件禁用SSR Next.js已经成为R

Next.js已经成为React生态系统中最受欢迎的框架之一。它有利于开发服务器端渲染（SSR）的React应用程序，而无需重新开始创建-react-app。Next.js的路由和其他内置配置主要是为SSR和抓取静态网站生成（SSG）而设计。

但是，在某些情况下，你的应用程序中的一个或多个Next.js组件可能不需要SSR。因此，在这篇文章中，让我们讨论一下如何通过禁用SSR来开发非SSR的Next.js组件。

服务器端渲染是一种在服务器上对每个请求进行渲染的方法，然后将完整的HTML和Javascript返回给客户端。首先，服务器处理所有必要的数据并运行JavaScript。然后，它生成页面并将其作为一个整体发送给客户端。

这使得将动态组件作为静态HTML标记提供服务成为可能。当索引不能有效地解释JavaScript时，SSR对搜索引擎优化（SEO）是有益的。当互联网连接速度慢使下载一个大的JavaScript包很麻烦时，它也可能是有用的。此外，如果你需要你的渲染页面是最新的，使用SSR将是理想的选择。

有时，你可能需要从Next.js页面或组件中选择不使用SSR。例如，集成只在浏览器中运行的第三方库和模块，或者如果你的组件需要访问浏览器独有的属性，如window对象或localStorage，则不需要SSR。

另外，禁用SSR也有利于减少你的软件包中只有少数用户需要的巨大或资源密集型模块的大小。

对于非简单的应用程序，SSR的使用可能会有所不同，因为它需要更广泛的配置，并给服务器带来更大的负载。此外，当有大量的处理时，应用程序有可能变得很慢，因为客户端在发出请求后必须等待每个页面的渲染。在这种情况下，禁用SSR将是一个更好的选择。

所以，在你的项目中是否使用SSR是一个个人偏好的问题，你必须根据情况来决定取舍。

接下来，让我们看看在Next.js中禁用SSR的几种方法。

Next.js声称支持JavaScript的ES2020动态导入（）。它允许你动态导入JavaScript模块，并且也能与SSR协同工作。

你可以使用ssr: false对象来禁用动态导入的组件的服务器端渲染，如下图所示。

import dynamic from 'next/dynamic'

否则，你可以创建一个名为NonSSRWrapper的包装组件，然后将任何页面包围在该组件中以禁用SSR。

import dynamic from ‘next/dynamic’

例如，假设你想在pages文件夹中的Home页面上禁用SSR。可以按以下方式进行。

// pages/home.js

我们必须检查窗口对象是否被定义，看看我们是在服务器端还是在客户端。为了使之更容易，可以定义一个实用的函数。

下面是一个例子，描述了如何通过简单地检查窗口对象是否被定义来禁用组件的SSR。

import { Home} from ‘./Home’;

no-ssr是一个包装非SSR组件的React组件。

当与使用服务器端渲染（SSR）的应用程序一起工作时，这个包装器使处理仅有客户端的组件变得容易。

首先，你需要按照下面的方法安装它。

npm i --save react-no-ssr

例如，让我们假设需要在客户端渲染Home组件。下面是我们如何做的。

import React from 'react';

这样，组件只有在被安装后才会在客户端呈现。当服务器端渲染的HTML在客户端启动时，它将不会渲染。因此，控制台中不会出现React警告信息。

本文讨论了一些技术，当你的Next.js应用程序不需要SSR时，你可以用它来禁用它。试着在适用的地方使用它们，以获得最大的好处。否则，你可能会面临不想要的结果。

当然，是否禁用SSR，以及上述哪种方法适合你，完全由你根据你的项目要求来决定。如果你已经使用过这些方法，请在评论区分享你的经验。谢谢您的阅读!