Insights·2026-09-11

Next.js 是什么 — 画面由谁在何时绘制

旧网页每次跳转都向服务器要一份新文档并整屏重绘,所以画面会闪一下。移动应用抬高了预期,网页也转向一次加载、跳转即时的单页方式,但在浏览器里绘制会让搜索引擎有看到空白页的风险。于是服务端先绘制的方式并行使用,而能在同一个项目里两者择一的,就是 Next.js。

Next.js — 다시 그리는 웹에서 숨겼다 꺼내는 웹으로 — 글의 요약 도식

画面会闪的年代

早年的网站,每点一次菜单画面就白一下。网速慢就长一点,快就短一点,结构是一样的。

原因很简单。每次跳转,浏览器都向服务器索要该地址对应的新文档,再用收到的内容把整屏重画。这种方式叫多页方式。

它有简单的好处:一个画面就是一份文档。搜索引擎也好读,因为每个地址返回的都是完整文档。

移动应用抬高了标准

后来移动应用出现了。应用和网页根本不同:从应用商店下载时,绘制画面所需的东西已经放进了设备。

所以切换画面时不向服务器要新文档。跳转立刻完成,只把该画面要填的值从服务器取回来填上。不闪,很顺滑。

体验过这种感觉后,用户的标准提高了。于是有了「网页能不能也这样」的疑问,答案是能。

单页方式就是那个答案。首次进入时把需要的东西加载好,用户要去别的画面时,把早已藏好的画面拿出来展示。不是丢掉再取,而是藏起来再拿出来。

多页方式单页方式
跳转时向服务器要新文档取出已加载的画面
体感闪一下即时切换
搜索引擎容易读取需要留意
首次加载轻可能偏重

由此产生的问题和它的解法

单页方式是有代价的。画面若在浏览器里绘制,搜索引擎访问时可能看到 JavaScript 尚未执行的空白状态。

这个问题已不像当年那么严重,搜索引擎执行 JavaScript 并读取结果已有多年。但仍有一些位置需要服务器事先备好的内容,比如分享链接时弹出的预览卡片。

于是并行使用服务端先绘制的方式,叫服务端渲染。服务器造出完整画面发过去,之后由浏览器接手继续顺滑地动。

让你在同一个项目里按画面选择这两者的,就是 Next.js。首页和用于分享的文章页在服务端绘制,登录后的仪表盘在浏览器绘制,可以这样分。

被称为框架的真正原因

该图展示了从 npm 获取的组件与自己编写的源代码经过构建,变成浏览器可读的 HTML、CSS 和 JavaScript 的过程。

Next.js 被称为框架,不只是因为渲染方式,还和如今网页开发的实际做法有关。

现在做网站不会什么都从头写。登录、日历、视频播放器这些很多人反复要用的功能,已经有人做好了。这些做好的包叫软件包,取用它们的仓库叫 npm。

于是你的项目变成别人做的零件堆加上你写的代码。问题是这个状态浏览器读不了。浏览器读的只有第二篇里那三个文件。

完成这个转换的过程叫构建。它把零件和你的代码合并、拆分、打包,变成浏览器能读的形态。部署要花几分钟,大部分就是这段构建时间;而按约定好的规则写代码、其余交给它来办,所以叫框架。

构建做的事
从 npm 取来的零件
        +               →  构建  →  浏览器能读的
你写的源代码                          HTML · CSS · JavaScript

部署花掉的那几分钟,大部分就是这支箭头