哈喽小伙伴们大家好,我是程序媛小李,今天为大家分享一项前端开发中比较主流的服务端渲染技术: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,启动项目,
在浏览器地址栏输入控制台启动成功的网址,看到如下内容,说明我们的配置没有问题
好啦,以上就是本期的全部内容,如果大家有疑问或者启动过程中出现了问题,也欢迎大家在评论区提出来,我们下期见!
