跳到主要内容

服务端组件

next.js 提供了服务端组件，它允许你在服务端渲染组件, 而不依赖与浏览器环境。服务端组件可以分为两种模式：

  • 静态渲染
  • 动态渲染

静态渲染​

默认情况下，所有服务端组件都是静态渲染的。 使用静态渲染时，next.js会将渲染结果缓存起来，并可以推送到CDN、redis等缓存中，以提高性能。

动态渲染​

所谓的动态渲染其实就是在渲染之前进行了数据请求，或者使用到了next.js的server api, 比如：

  • fetch()，使用fetch()获取数据
  • headers(), 使用headers()获取请求头中的信息
  • cookies()，使用cookies()获取cookie中的信息
  • searchParams，使用searchParams获取url中的query参数 这些api后续会单独讲解，这里先简单了解一下即可。

由于这些数据是运行时才能获取到的，并不能在编译阶段获取，所以这些数据没办法被静态缓存。

服务端渲染的优势​

  • 缓存：在服务器端渲染的结果获取请求的数据，都可以缓存并在后续请求和用户之间重复使用。这可以通过复用重复的请求和渲染结果来提高性能。
  • bundle的大小，由于服务端组件不需要使用浏览器api，也就是没有额外的js文件，所以bundle的大小会小很多。
  • seo：服务端组件会将数据渲染到html中，所以可以更好的被搜索引擎收录。
  • 流式渲染：服务器组件允许你将内容拆分为多个块，并在渲染完成之后将它们流式传输到客户端。这其实就是允许用户更早地看到页面的某些部分，而不必等待整个页面在服务器上呈现。

避免使用浏览器api​

虽然next.js支持组件在服务端进行渲染，但是如果你在服务端组件中使用了浏览器api，那么会导致服务端组件无法正常渲染。

这一点在开发中很容易被忽略，各位小伙伴可以多注意一下。

use server​

next.js默认就是server component，但是并不会在编写代码时提示错误使用api的风险。为了避免我们使用浏览器api，next.js提供了use server关键字，它可以帮助我们检测到不安全的api使用。

"use server"

export default function Home() {
    const [count, setCount] = useState(0);
    // 由于server端不允许使用react/client 相关的api，所以这里会报错

    useEffect(() => {
    }, [])

    return <div>{count}</div>;
}

但是有的小伙伴可能会说，我就是需要使用useState、useEffect等api啊，怎么办？

接着往下看，client component.