画面会闪的年代
早年的网站,每点一次菜单画面就白一下。网速慢就长一点,快就短一点,结构是一样的。
原因很简单。每次跳转,浏览器都向服务器索要该地址对应的新文档,再用收到的内容把整屏重画。这种方式叫多页方式。
它有简单的好处:一个画面就是一份文档。搜索引擎也好读,因为每个地址返回的都是完整文档。
移动应用抬高了标准
后来移动应用出现了。应用和网页根本不同:从应用商店下载时,绘制画面所需的东西已经放进了设备。
所以切换画面时不向服务器要新文档。跳转立刻完成,只把该画面要填的值从服务器取回来填上。不闪,很顺滑。
体验过这种感觉后,用户的标准提高了。于是有了「网页能不能也这样」的疑问,答案是能。
单页方式就是那个答案。首次进入时把需要的东西加载好,用户要去别的画面时,把早已藏好的画面拿出来展示。不是丢掉再取,而是藏起来再拿出来。
| 多页方式 | 单页方式 | |
|---|---|---|
| 跳转时 | 向服务器要新文档 | 取出已加载的画面 |
| 体感 | 闪一下 | 即时切换 |
| 搜索引擎 | 容易读取 | 需要留意 |
| 首次加载 | 轻 | 可能偏重 |
由此产生的问题和它的解法
单页方式是有代价的。画面若在浏览器里绘制,搜索引擎访问时可能看到 JavaScript 尚未执行的空白状态。
这个问题已不像当年那么严重,搜索引擎执行 JavaScript 并读取结果已有多年。但仍有一些位置需要服务器事先备好的内容,比如分享链接时弹出的预览卡片。
于是并行使用服务端先绘制的方式,叫服务端渲染。服务器造出完整画面发过去,之后由浏览器接手继续顺滑地动。
让你在同一个项目里按画面选择这两者的,就是 Next.js。首页和用于分享的文章页在服务端绘制,登录后的仪表盘在浏览器绘制,可以这样分。
被称为框架的真正原因

Next.js 被称为框架,不只是因为渲染方式,还和如今网页开发的实际做法有关。
现在做网站不会什么都从头写。登录、日历、视频播放器这些很多人反复要用的功能,已经有人做好了。这些做好的包叫软件包,取用它们的仓库叫 npm。
于是你的项目变成别人做的零件堆加上你写的代码。问题是这个状态浏览器读不了。浏览器读的只有第二篇里那三个文件。
完成这个转换的过程叫构建。它把零件和你的代码合并、拆分、打包,变成浏览器能读的形态。部署要花几分钟,大部分就是这段构建时间;而按约定好的规则写代码、其余交给它来办,所以叫框架。
从 npm 取来的零件
+ → 构建 → 浏览器能读的
你写的源代码 HTML · CSS · JavaScript
部署花掉的那几分钟,大部分就是这支箭头