从零开始NEXT.js(四)——服务器组件

avatar
作者
猴君
阅读量:5

从零开始NEXT.js(三)——layout.tsx的用法-CSDN博客

这章我们来重点讨论运行tsx组件和其他React组件的不同。

客户端渲染和服务器渲染

当我们请求网站时,服务器本质只是向我们发送回一个JavaScript包,把你所有的组件都捆绑在一起发送给客户。

这是客户端渲染的流程。服务器发送JavaScript包给客户,然后添加到Render Shell中,从而将组件重建为HTML格式 。一旦加载完整个JavaScript包,你的页面交互性会变的非常快。

但问题在于第一次绘制,此时用户不再盯着空白的白屏。总体布局已呈现,但内容仍缺失。这有时被称为 FCP(First Contentful Paint)。不仅如此,你的页面在渲染框架完成后有了交互性,但你还需等待数据库查询,数据库查询步骤在所有渲染所有内容之后,在此期间你必须在此等待,例如常见的旋转等待的图标,这会拖慢客户访问的速度。

使用SSR(服务器端渲染)的好处在于在服务器上渲染框架,这样你第一次绘制就会很快,你会得到来自服务器的文本和所有内容,但JavaScript包仍要下载,所以他会Hydrate你的应用,让他具有交互性。从性能方面,页面的交互性并没有提前,而且仍然需要去等待数据库的查询。

NEXT.js渲染流程

NEXT.js的渲染方式和其他React组件不同,他是先进行数据库查询,然后渲染出整个应用,这两个步骤,尤其是数据库查询花费的很大一部分时间,所以我们把他放在服务器上执行。好处在于我们构建应用时可以先用编译的方法,在构建的时候运行他,让他呈现静态的HTML页面。

这是一个简单的例子,我们主页默认是一个服务器组件,在这个页面上没有任何动态功能,当你构建时,服务器会知道你是一个静态页面,不用执行别的操作。

import Image from "next/image";  export default function Home() {   return (     <main className="flex min-h-screen flex-col items-center justify-between p-24">       <h1>Home</h1>     </main>   ); } 

这时我们来执行npm run build来构建。

npm run build

执行后我所有的页面(包括前几篇创建的页面)都被构建成了静态页面

之后执行npm run start就可以访问页面了。

修改我们的代码,让主页执行fetch请求

import Image from "next/image";  export default async function Home() {   const data=await await fetch('http://localhost:3002/test');   console.log(data)   return (     <main className="flex min-h-screen flex-col items-center justify-between p-24">       <h1>Home</h1>     </main>   ); } 

这时我们构建应用时发现是先进行fetch请求也就是数据库查询,然后再对静态页面进行构建的,与NEXT.js渲染流程章节的流程图一致。

服务端控制台

这里我访问后台并在控制台中打印访问到的信息,可以看到日志输出是在编辑器这里也就是服务端,因为这个页面属于服务器组件,所以他所有的日志都在服务端打印。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!