如何在广泛使用 React hooks 的同时利用 Next.js 服务器端渲染？

Question

我最近开始从事一个使用 Next.js 的前端项目，我正试图弄清楚如何最好地利用它提供的 SSR。 我也想使用一些客户端抓取，虽然文档解释说在组件中使用 React 钩子将使其呈现客户端，但似乎很少说明这如何影响 DOM 树上/下的其他组件。

我尝试通过创建一个站点来测试 SSR/CSR 行为，方法是创建一个包含一些组件（其中包含/不包含 React 挂钩）的站点，并首先在启用 JavaScript 的情况下在 Chrome 中打开它，然后禁用它。 到目前为止，我发现了几件事，我想知道我的假设是否正确：

• 似乎使用钩子的组件像典型的 React 组件一样工作——当父渲染中的效果/状态钩子时，它们的子组件会重新渲染，因此它们似乎没有从 SSR 中受益，而是应该使用像React.memo这样的 React 特性来优化.
• 当我在禁用 JS 的情况下打开网站时，似乎所有组件都已预渲染 - 使用 state 并显示它的组件，甚至显示挂钩中设置的初始 state。 例如，以下组件：

export const TestComponent = () => {
  const [num, setNum] = useState(13)
  return (
    <div>
      <button onClick={() => setNum(num+1)}>CLICK</button>
      <h2>Number: {num}</h2>
    </div>
  )
}

实际上包含文本“ Number: 13 ”（虽然没有 JS 按钮显然不起作用）

我还想知道使用全局上下文提供程序会在多大程度上削弱 SSR 的性能改进。 假设我的_app.jsx将每个页面包装在定期查询 API 的提供程序中。它是否完全抵消了 SSR 提供的优势，因为它可能会导致整个页面重新呈现？

Answer 1

将 SSR 视为第一个绘制数据，它的触发因素是什么。 任何导致 SSR 触发器运行的内容，您将从getServerSideProps获取数据

SSR 通常是出于 SEO 目的而完成的，因此机器人可以抓取预呈现的数据。 任何依赖于客户端获取的数据都不太容易被抓取。

假设对于一个购物页面，初始产品加载可以是 SSR，而后续产品在单击“加载更多”按钮时发生在客户端，使用useSWR挂钩。 这是一种有效的方法，它混合了 SSR 和 CSR。

如果提供商查询 API，则为客户端提取。 它不会与 SSR 正在做的事情一致。 了解 SSR 的触发因素很重要，这通常发生在首次访问、重新加载和任何触发路由更改/推送的事情上。 SSR 和客户端提取都以它们自己的方式做事。

进一步阅读：

1. https://swr.vercel.app/docs/with-nextjs#pre-rendering-with-default-data
2. https://nextjs.org/docs/routing/shallow-routing

Answer 2

这个问题没有千篇一律的答案，因为在广泛使用 React hooks 的同时利用 Next.js 服务器端渲染的最佳方式将根据您的具体需求和偏好而有所不同。 但是，关于如何实现这一目标的一些技巧包括：

1.尝试同时使用 Next.js 客户端和服务器库。 Next.js 客户端库允许您在 React 应用程序中使用 Next.js 功能，而 Next.js 服务器库允许您使用 Next.js 在服务器上呈现您的应用程序。 这是利用 Next.js 的服务器端渲染功能和 React 的挂钩功能的好方法。

2.使用react-router-dom进行路由。 react-router-dom 是一个流行的 React 路由库，也支持服务端渲染。 对于需要使用 Next.js 的服务器端渲染功能以及路由器功能的应用程序来说，这可能是一个不错的选择。

这是一个小例子。 我希望它能帮助你。

import React from 'react';

import { useRouter } from 'next/router';


const Page = () => {

 const router = useRouter();

 const { id } = router.query;

 return <p>Post: {id}</p>;

};

export default Page;