Next.js

前言

正所谓合久必分,分久必合。出于SEO、安全性等因素考虑,许多前后端分离的项目为了首屏加载在服务端完成渲染不得不选择了SSR技术。

在过去一段时间内,前后端分离所带来前端部分进行纯客户端渲染,即页面加载、渲染过程完全交由客户端。服务端仅提供数据的接口。

前端和后端人员的的职责更加明确,开发效率也得到了很大的提升。UI 渲染和业务逻辑也得到了很好的分离。同时得益于现代前端开发框架的蓬勃发展,也使得纯客户端渲染能够带来更个性化的页面视觉效果和交互体验。SPA单页应用的开发也成为了一种趋势。 但这样的开发模式并非是完美的。纯客户端渲染页面的初始结构和内容都是通过后续执行JS代码生成的。这就导致了一些问题。

• 以Vue和React举例,在浏览器输入网址获取到的html文档的结构往往只有一个div根节点,虽然在用户视角中并不关心实际的html结构,但对于网络爬虫、障碍辅助技术、搜索引擎等来说,他们并不知道这意味着什么。
• 同时纯客户端渲染也就意味着所有前端渲染代码都会暴露在用户端,即使对生产环境下的代码进行混淆等操作,也无法保证数据的安全。
• 页面的渲染交给后续加载JS代码,也就导致首屏加载时间会受到JS代码的影响,不可避免导致首屏加载时间变长。

面对这些痛点,其实社区也涌现了诸如SSR技术的解决方案。但这些解决方案也并非完美的。

在这个背景下,集成客户端渲染和服务端渲染的开发模式开始焕发出它的光彩。

Next.js就是其中的佼佼者,得益于与React的完美集成,Next.js的开发体验也得到了很好的提升。再加上React本身也在服务端渲染方向上不断拓展,Next.js已经成为全栈开发的首选。

Next.js的重要特点

• 基于文件系统构建项目路由 --无需所谓的路由配置文件 (这与我们以往使用的Vue-Router、React-Router等不同)
• 通过React去构建页面内容,(包括服务器组件和客户端组件)。
• 服务器组件和客户端组件通过use client划分界限。
• 由于仅客户端组件在客户端执行并渲染,因此可以直接在Next.js中检索数据库获取数据，或者编写数据路由，由Next.js进行数据请求响应，当然也可以在已有的后端接口完成数据获取。