技能 | next.js服务端渲染技术

哈喽小伙伴们大家好,我是程序媛小李,今天为大家分享一项前端开发中比较主流的服务端渲染技术:next.js

首先,next.js是什么?

通俗来讲,它就是一个React框架,

它能干啥?它能实现服务端渲染.

什么是服务端渲染?

一句话它就是在服务端生成整个页面的内容,用户在客户端只需要发起一次请求就可以看到全部的页面内容(这里也暴露了一个问题:首屏加载时间长,大家想想为什么?),对于网站的SEO上有很大的帮助.

那么,我们为什么要做服务端渲染?

原因就太多太多啦!下面简单列举几个

1. 提高初次加载性能

更快的首屏渲染：SSR 可以将完整的 HTML 页面直接发送到客户端，这样浏览器可以立即展示内容，而不需要等待 JavaScript 加载和执行。这对于用户体验至关重要，尤其是在网络速度较慢或设备性能有限的情况下。
2. 改善 SEO

搜索引擎优化：搜索引擎的爬虫通常更容易抓取和索引服务端渲染的页面，因为它们已经包含了完整的 HTML 内容。这有助于提高网站的搜索引擎排名，特别是对于依赖搜索引擎流量的站点。

3. 提高社交媒体分享效果

开放图谱（Open Graph）和社交卡片：当页面是通过服务端渲染生成的时，社交媒体平台（如 Facebook、Twitter）可以直接抓取并显示正确的标题、描述和缩略图，这对于提高内容分享效果非常重要。

4. 支持更复杂的用户界面和交互

状态管理：在 SSR 中，你可以在服务器上处理复杂的业务逻辑和状态管理，然后将初始状态传递到客户端。这使得客户端的 JavaScript 可以在服务器提供的内容的基础上进行进一步的交互。

5. 支持不支持 JavaScript 的浏览器

增强兼容性：尽管现代浏览器普遍支持 JavaScript，但一些用户可能禁用了 JavaScript 或使用的是较旧的浏览器。服务端渲染确保即使在没有 JavaScript 的情况下，用户仍然能够访问和浏览页面内容。

6. 改善网站性能和用户体验
更快的内容交付：通过将 HTML 内容在服务器上预先生成并发送给客户端，减少了客户端渲染时间，从而提高了页面的响应速度和用户体验。

以上都是一些基础知识,接下来,才是我们的重点:怎么基于next.js实现服务端渲染?

首先,我们需要确定node.js的版本(一定要18.18以上!)

紧接着,我们进入官网

Getting Started: Installation | Next.js

这里选择使用APP router

然后按照官方文档去安装

执行这行命令

大家可以看到,我这里已经安装成功了,只要node.js版本合适,这里安装的时候一般不会出现问题

安装好之后,根据官方文档初始化项目

这里,大家按照自己的需求来选择相应的配置就可以

完成之后,在idea中打开创建好的项目

在终端执行这行代码

npm install next@latest react@latest react-dom@latest

完成之后,打开根目录下的oackage.json

添加如下目录:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

然后,右键单击dev,启动项目,

在浏览器地址栏输入控制台启动成功的网址,看到如下内容,说明我们的配置没有问题

好啦,以上就是本期的全部内容,如果大家有疑问或者启动过程中出现了问题,也欢迎大家在评论区提出来,我们下期见!