在2024年的今天，相信前端早已不局限于对着组件库撸后台curd，随着互联网行业的收紧，各大公司对前端的要求也越来越高，请热爱前端行业的朋友不要气馁，前端还可以做很多事。曾经业界还对`typescript`抱有观望态度，而现在几乎已经成为了前端基石。在2024年之后，个人认为服务端渲染框架将成为必备技能，本篇文章并不谈太多技术，就发展方向表达个人观点。前端仍然有很多可以深挖的细分领域，比如`webgl`、`Flutter`、`Rust`等，但是这些领域较窄，能提供的岗位有限，需要认定之后去深入研究，比较吃长期积累。对于大部分前端开发者，更容易拓展自己边界的便是使用`nodejs`参与服务端，这里并不是要大言不惭的去抢传统服务端的工作，而是有非常多的场景前端自己就可以搞定，并不是所有业务都是互联网大厂C端业务。举几个简单的场景： 1. 官网项目，含有内容管理 2. 博客系统 3. 公司内部工具平台 4. 业务量非常稳定的轻量业务（比如：心理职业测试、在线工具、文档查询等） 5. 有些外包项目以上业务不需要各种复杂的服务端技术来支撑它，一个几千甚至几万人公司的内部项目单一数据库支撑完全足够，何况当前云服务的发展非常迅速，即使遇到了性能问题，云服务都有相关解决方案。希望前端同学可以使用Nextjs这类框架去创造自己的小产品，无论是对外还是司内，而不仅仅停留在超大互联网项目中画页面。现在的服务端渲染框架具备如下优势： 1. 服务端渲染不用多说，需要`seo`或高性能访问页面必备。 2. 将很多库保留在服务端减轻前端加载体积，如时间格式化等。 3. 当前服务端渲染框架都具备接入数据库连接能力，也是核心能力，轻量业务场景单一数据库足够使用。 4. 可构建为单一程序包发给客户（前后端程序一体），第三方使用成本大大下降，甚至可以出售自己的程序包。 5. Vercel等平台对服务端渲染框架提供了极大支持，哪怕无服务器和数据库，也可以直接发布在线应用。参与服务端后会经常配置nginx等服务器，对浏览器缓存也会有更深入的理解，因为在以前这些不经常经手前端，运维与服务端并不关心哪些资源需要被缓存，那些需要被压缩。好的缓存规则和开启`gzip` 或`br`压缩能够极大的提高加载效率，使页面可以闪电般的打开。这其中的学习成本仅有基础的sql语言，适应服务端环境与客户端渲染环境的不同。 ## Todo List 对于服务端框架不是很熟悉的同学，可以通过Todo List演示来初探基础《全栈》的概念。我们以`Nextjs`为例，使用[prisma](https://www.prisma.io/)作为数据库ORM，prisma目前也是最强大的ORM，他帮我们同步数据库表结构，生成含有严格typescript检查的orm连接器，并且提供了最简洁的语法，极大提高了安全性与使用便捷性。安装Nextjs ```sh npx create-next-app@latest What is your project named? todo Would you like to use TypeScript? No / Yes #yes Would you like to use ESLint? No / Yes # no Would you like to use Tailwind CSS? No / Yes #yes Would you like to use `src/` directory? No / Yes #yes Would you like to use App Router? (recommended) No / Yes # yes Would you like to customize the default import alias (@/*)? No / Yes # yes What import alias would you like configured? @/* ``` 安装prisma和dayjs ```sh npm i prisma dayjs -D npx prisma init --datasource-provider sqlite # 这里可以使用多种数据库类型 ``` 我们使用`sqlite`作为数据库存储，它比较轻量，也实现了常见的关系型数据库功能，不需要安装额外的程序，特别是在Mac 或 Linux系统，小型应用将他用于生产环境也是完全没有问题的。初始化后我们可以看到在项目根目录下多了prisma文件夹，文件夹下有schema.prisma文件。打开此文件定义我们的表结构，vscode与webstorm都有prisma相关的语法检查与提示插件，可以预先安装。 ```prisma generator client { provider = "prisma-client-js" } datasource db { provider = "sqlite" url = env("DATABASE_URL") } model Todo { id Int @id @default(autoincrement()) // 主键自增id name String // 任务名 time String // 执行时间 created DateTime @default(now()) // 记录默认创建时间 } ``` 定义好todo表之后，执行`prisma db push`命令，他将在prisma文件夹下生成`dev.db`文件，就是sqlite的数据存储文件，同时将表结构写入数据库。并自动安装了 `@prisma/client`，这个库用来操作数据库。执行 npm run dev 启动我们的应用，在浏览器中打开在调试工具中我们可以看到返回的是html，服务端已经预渲染的内容。首页的文件在 src/app/page.tsx 中，我们来编辑他使他可以添加任务。首先清除 src/app/global.css 中的多余样式，仅保留`tailwind`部分。 ```css @tailwind base; @tailwind components; @tailwind utilities; ``` 在src/app/page.tsx文件中加入如下代码： ```tsx export default function Home() { return (

) } ``` 界面变成了这样 ![18cb648593a.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b5dbb5ed94af4de4a23be70df80765b7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1124&h=186&s=20960&e=png&b=ffffff) 接下来我定义orm链接器，创建src/app/prisma.ts文件，内容如下： ```ts import { PrismaClient } from '@prisma/client' const prismaClientSingleton = () => { return new PrismaClient() } type PrismaClientSingleton = ReturnType const globalForPrisma = globalThis as unknown as { prisma: PrismaClientSingleton | undefined } const prisma = globalForPrisma.prisma ?? prismaClientSingleton() export default prisma if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma ``` 他导出了PrismaClient实例，并且防止开发阶段创建过多的链接。现在我们来写入表单中的数据进入数据库。 Nextjs默认所有组件不特别声明都是服务端组件，服务端组件无法进行交互，如使用：useState,useEffect,onClick等。我们把表单移入一个客户端文件，创建src/app/form.tsx文件，内容如下 ```tsx 'use client' import { useCallback } from "react" import { addTodo } from "./data" export function Form() { const submit = useCallback(async (e: React.MouseEvent) => { e.preventDefault() const formData = new FormData(e.target as HTMLFormElement) await addTodo({ name: formData.get('name') as string, time: formData.get('time') as string }) location.reload() }, []) return ( ) } ``` 在文件开头加入 `use client`可以告诉nextjs这是一个可以在客户端使用的组件，交互才可以进行，为什么要区分服务端和客户端？一方面是为了在服务端组件执行sql查询等操作，另一方面为了减轻js加载体积，因为服务端组件并不需要在js文件中生成渲染函数，它完全在服务端执行。接下来有趣的地方是addTodo函数，文件是src/app/data.ts，我们先看看他的代码 ```ts 'use server' import prisma from "./prisma" export const addTodo = async (data: {name: string, time: string}) => { await prisma.todo.create({ data: data }) } ``` 是不是很像直接调用了写入数据库的一个函数？其实这是Nextjs独有的功能，叫`Server Action` 将服务端函数自动转换为一个http调用，他的执行环境仍然在服务端，如果在客户端直接写入数据库那不就乱套了嘛。所以请不要担心前端操作了数据库，addTodo也可以用你熟悉的http请求来实现。接下来我们修改src/app/page.tsx代码 ```tsx import dayjs from "dayjs" import { Form } from "./form" import prisma from "./prisma" const getTodos = () => { return prisma.todo.findMany({ select: {id: true, name: true, time: true, created: true} }) } export default async function Home() { const todos = await getTodos() return (

{item.time} 执行 {item.name} 创建时间： {dayjs(item.created).format('YYYY-MM-DD HH:mm')}

) } ``` 没有特别声明就是服务端组件，所以我们在page.tsx中可以直接查询 todo 数据并渲染，请注意上面的`dayjs`引用，他对创建时间进行了格式化，但是他并不会被打入前端js包中，仅在服务端运行，所以在一定程度上减少了js包体积。最终结果如下 ![18cb97fd11c.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/899371370e18442bb7f658f1bffcc21a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1324&h=450&s=70406&e=png&b=ffffff) 通过以上代码我们同时操作了前端交互与数据库，并且界面都是服务端渲染的。第一次接触的同学可能会有点混乱，觉得开发时会不会搞混，其实没关系，等渐渐熟悉了服务端框架这套逻辑后，他的逻辑还是很清晰可控的。 nodejs中有一个非常全面的api框架叫 [nestjs](https://nestjs.com/)他与nextjs一个字母之差但是使用场景完全不同，nestjs是类似java spring boot的全面服务端框架，但是nextjs提供了基本够用的服务端与数据库交互能力，重点在前后端融合这里。在非复杂业务下，直接在一个框架里，甚至一个文件里完成服务端与前端的工作开发效率岂不是起飞？我开发的所见即所得Markdown辑器叫《青石》，不过他的在线版使用了`remix`，体验接近于`typora`。感兴趣的小伙伴可以关注 [GitHub](https://github.com/1943time/bluestone) 其实大型项目没有那么多，不需要redis、docker、负载均衡、数据库分布式之类的才能运行，拿起他开始创造吧，快速实现的你想法，给公司与客户带去价值。