Next.js 初体验
date
Feb 18, 2024
slug
first impression of next js
status
Published
tags
frontend
summary
type
Post
过年的时候学习了一下Next.js，它是是Vercel团队开发的一款框架，Vercel简单来说就是一个帮你部署网站的服务。我的博客网站和之前《程序员如何写好一份简历》提到的在线简历模版，都是通过vercel部署的。
因此我对Next.js比较感兴趣的，后续也打算使用它做一些工具。
我是跟着官网的教程学习的，大概学习了5～6个小时，这个教程就是从0开始搭建一个dashboard。
下面分享一些学习时候的笔记
目录结构
省略了外部的一些config文件。
- app：用于存放我们平时写的代码
- public：一些资源文件，比如icon，png等
- scripts：一些脚本文件，这里有一个脚本用来创建数据库结构
- node_modules：包管理的文件夹
我们再看看app里面的内容
其中ui是存放React组件的，这个教程里面大部份的ui组件都提前写好了。
lib里面存放的都是
.ts或者.js 文件，像教程里面存放了工具类utils、结构体定义definitions、db交互相关的代码。剩下两个文件夹分别是dashboard和login了，Next.js有一个很大的特点，就是根据文件夹的路由来渲染页面的，这里对应的其实是localhost:3000/dashboard和localhost:3000/login的两个路由。以此类推，我们会发现dashboard下面有更深层的文件夹，也就是更深层的路由。
其中有两个特殊的文件夹，它们的作用分别是：
[id]：Next.js 支持使用方括号（[]）创建动态路由。在这个例子中，[id]文件夹表示任何像/invoices/1或/invoices/abc这样的路径都将被映射到invoices/[id]目录下的同一页面。
(overview)：当你创建一个新的使用圆括号的文件夹时，该名称将不会被包含在 URL 路径中。所以/dashboard/(overview)/page.tsx实际上对应的 URL 是/dashboard。在教程中，overview下面有loading.tsx和page.tsx的文件，通过()，我们可以把loading.tsx和page.tsx的影响范围限定在dashboard中。
在这里实际的例子就是页面处于加载状态时的预览效果：
让我们看看其他目录结构：
你会发现每个文件夹几乎都有page.tsx，在Next.js中，page.tsx就是一个可访问的页面，我们通过编写page.tsx来控制页面需要渲染哪些内容。
最佳实践
- 需要和DB交互的，最好存放在lib/下面
例如这个函数：
它就存放在data.ts里面，作为一个异步函数来读取db里面的内容。
- 获取DB数据的操作，最好等待需要渲染组件的时候才调用
简单来说就是，在瀑布模型里面尽可能深的位置调用这些操作。这是因为访问DB的操作可能有多个，我们只关心对应数据的操作，不关心其它操作是否完成，讲这些操作下放可以有效的避免其它无关的sql引起的阻塞问题。
- 最好使用
await Promise.all()来并行的获取数据
- 有关db的操作，最好放在server-side进行，因为DB的密码不能泄漏。
- 不涉及db操作的页面，最好放在client-side执行，这样能减轻server的压力。
演变历史
这个教程还写了一些前端的演变历史，我这里总结一下，以下80%内容来自GPT：
在描述前端后端交互发展到单页面应用（SPA）为止的历史时，我们需要从早期的静态网页开始讲起：
- 静态网页：在最早的互联网阶段，所有的网页都是静态的。服务器上存储了一系列HTML文件，当用户请求一个页面时，服务器就会返回相应的HTML文件。这种模式下，每个用户操作（如点击链接）都需要重新加载整个页面，无法实现复杂的用户交互。
讲个笑话： 后端：我直接给你返回HTML得了。 前端：好嘞，你给我DB的密码，我自己去读数据也行。
- 动态网页和服务器渲染：随着技术的进步，出现了一种新的技术——服务器端动态生成HTML。通过编程语言（如PHP、Java、Python等）和模板引擎，服务器可以根据用户的请求动态地生成HTML页面。这使得网页可以根据不同用户或者同一用户的不同请求显示不同的内容。然而，每次用户交互依然需要向服务器发送请求并刷新整个页面。
- Ajax 和局部刷新：Ajax 技术的出现改变了前端和后端的交互方式。通过 Ajax，浏览器可以在不刷新整个页面的情况下向服务器发送请求并获取数据，然后只更新页面中的某一部分。这极大地改善了用户体验，使网页能够达到类似桌面应用的交互效果。
- 单页应用（SPA）：随着 JavaScript 框架（如 AngularJS、React、Vue.js 等）的出现，SPA 开始流行起来。SPA 意味着在一个 HTML 页面中完成所有用户交互，不需要全页刷新或跳转，所有页面的切换和数据交互都在浏览器端完成，服务器主要提供 API 来处理数据请求。SPA 提供了更好的用户体验，更快的反应速度，同时由于大部分逻辑在客户端完成，也减轻了服务器的压力。
以下是 Next.js 所支持的几种主要的渲染策略：
- 静态生成（Static Generation）：这是预先在构建时间生成页面的方法。每个请求都将得到同样的 HTML 文件，这被称为静态 HTML 文件。
- 服务器端渲染（Server-Side Rendering）：这是在每个请求的时候生成页面的方法。
- 客户端渲染（Client-Side Rendering）：你也可以使用 Next.js 来构建单页面应用（SPA），其中一些或所有页面都使用客户端渲染。
这三种策略可以在同一个 Next.js 应用中混用，并且可以针对每个页面单独决定使用哪一种渲染策略。例如，一部分页面可以通过静态生成进行预渲染，而其他页面则可以使用服务器端渲染或客户端渲染。
我们可以在
.tsx文件的行首通过’use client’或者’use server’来切换渲染模式。