首页 前端知识 2024为什么前端都应该掌握Nextjs 或 Nuxtjs

2024为什么前端都应该掌握Nextjs 或 Nuxtjs

2024-02-12 14:02:37 前端知识 前端哥 347 743 我要收藏

在2024年的今天,相信前端早已不局限于对着组件库撸后台curd,随着互联网行业的收紧,各大公司对前端的要求也越来越高,请热爱前端行业的朋友不要气馁,前端还可以做很多事。曾经业界还对typescript抱有观望态度,而现在几乎已经成为了前端基石。在2024年之后,个人认为服务端渲染框架将成为必备技能,本篇文章并不谈太多技术,就发展方向表达个人观点。

前端仍然有很多可以深挖的细分领域,比如webglFlutterRust等,但是这些领域较窄,能提供的岗位有限,需要认定之后去深入研究,比较吃长期积累。

对于大部分前端开发者,更容易拓展自己边界的便是使用nodejs参与服务端,这里并不是要大言不惭的去抢传统服务端的工作,而是有非常多的场景前端自己就可以搞定,并不是所有业务都是互联网大厂C端业务。举几个简单的场景:

  1. 官网项目,含有内容管理

  2. 博客系统

  3. 公司内部工具平台

  4. 业务量非常稳定的轻量业务(比如:心理职业测试、在线工具、文档查询等)

  5. 有些外包项目

以上业务不需要各种复杂的服务端技术来支撑它,一个几千甚至几万人公司的内部项目单一数据库支撑完全足够,何况当前云服务的发展非常迅速,即使遇到了性能问题,云服务都有相关解决方案。希望前端同学可以使用Nextjs这类框架去创造自己的小产品,无论是对外还是司内,而不仅仅停留在超大互联网项目中画页面。

现在的服务端渲染框架具备如下优势:

  1. 服务端渲染不用多说,需要seo或高性能访问页面必备。

  2. 将很多库保留在服务端减轻前端加载体积,如时间格式化等。

  3. 当前服务端渲染框架都具备接入数据库连接能力,也是核心能力,轻量业务场景单一数据库足够使用。

  4. 可构建为单一程序包发给客户(前后端程序一体),第三方使用成本大大下降,甚至可以出售自己的程序包。

  5. Vercel等平台对服务端渲染框架提供了极大支持,哪怕无服务器和数据库,也可以直接发布在线应用。

参与服务端后会经常配置nginx等服务器,对浏览器缓存也会有更深入的理解,因为在以前这些不经常经手前端,运维与服务端并不关心哪些资源需要被缓存,那些需要被压缩。好的缓存规则和开启gzipbr压缩能够极大的提高加载效率,使页面可以闪电般的打开。

这其中的学习成本仅有基础的sql语言,适应服务端环境与客户端渲染环境的不同。

Todo List

对于服务端框架不是很熟悉的同学,可以通过Todo List演示来初探基础《全栈》的概念。我们以Nextjs为例,使用prisma[1]作为数据库ORM,prisma目前也是最强大的ORM,他帮我们同步数据库表结构,生成含有严格typescript检查的orm连接器,并且提供了最简洁的语法,极大提高了安全性与使用便捷性。

安装Nextjs

npx create-next-app@latest

What is your project named? todo
Would you like to use TypeScript? No / Yes 
Would you like to use ESLint? No / Yes 
Would you like to use Tailwind CSS? No / Yes 
Would you like to use `src/` directory? No / Yes 
Would you like to use App Router? (recommended) No / Yes 
Would you like to customize the default import alias (@/*)? No / Yes 
What import alias would you like configured? @/*

安装prisma和dayjs

npm i prisma dayjs -D
npx prisma init --datasource-provider sqlite 

我们使用sqlite作为数据库存储,它比较轻量,也实现了常见的关系型数据库功能,不需要安装额外的程序,特别是在Mac 或 Linux系统,小型应用将他用于生产环境也是完全没有问题的。

初始化后我们可以看到在项目根目录下多了prisma文件夹,文件夹下有schema.prisma文件。打开此文件定义我们的表结构,vscode与webstorm都有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 启动我们的应用,在浏览器中打开 http://localhost:3000[2] 在调试工具中我们可以看到返回的是html,服务端已经预渲染的内容。

首页的文件在 src/app/page.tsx 中,我们来编辑他使他可以添加任务。首先清除 src/app/global.css 中的多余样式,仅保留tailwind部分。

@tailwind base;
@tailwind components;
@tailwind utilities;

在src/app/page.tsx文件中加入如下代码:

export default function Home() {
  return (
    <div className="p-10 flex justify-center">
      <form className="flex items-center space-x-3">
        <input name="name" className="w-48 border rounded px-2" placeholder="请输入任务名称"/>
        <input name="time" className="w-48 border rounded px-2" placeholder="请输入执行时间"/>
        <button type="submit" className="border rounded px-2 min-w-16">添加</button>
      </form>
    </div>
  )
}

界面变成了这样

接下来我定义orm链接器,创建src/app/prisma.ts文件,内容如下:

import { PrismaClient } from '@prisma/client'

const prismaClientSingleton = () => {
  return new PrismaClient()
}

type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>

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文件,内容如下

'use client'

import { useCallback } from "react"
import { addTodo } from "./data"

export function Form() {
  const submit = useCallback(async (e: React.MouseEvent<HTMLFormElement>) => {
    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 (
    <form className="flex items-center space-x-3" onSubmit={submit}>
      <input name="name" className="w-48 border rounded px-2" placeholder="请输入任务名称"/>
      <input name="time" className="w-48 border rounded px-2" placeholder="请输入执行时间"/>
      <button type="submit" className="border rounded px-2 min-w-16">添加</button>
    </form>
  )
}

在文件开头加入 use client可以告诉nextjs这是一个可以在客户端使用的组件,交互才可以进行,为什么要区分服务端和客户端?一方面是为了在服务端组件执行sql查询等操作,另一方面为了减轻js加载体积,因为服务端组件并不需要在js文件中生成渲染函数,它完全在服务端执行。

接下来有趣的地方是addTodo函数,文件是src/app/data.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代码

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 (
    <div className="p-10 mx-auto w-[500px]">
      <ul className="mb-4 px-3">
        {todos.map(item => 
          <li key={item.id}>
            <span className="text-sky-500">{item.time}</span> 
            <span className="mx-2">执行</span>
            <span className="text-orange-500">{item.name}</span>
            <span className="mx-2">创建时间:</span>
            <span>{dayjs(item.created).format('YYYY-MM-DD HH:mm')}</span>
          </li>  
        )}
      </ul>
      <Form/>
    </div>
  )
}

没有特别声明就是服务端组件,所以我们在page.tsx中可以直接查询 todo 数据并渲染,请注意上面的dayjs引用,他对创建时间进行了格式化,但是他并不会被打入前端js包中,仅在服务端运行,所以在一定程度上减少了js包体积。

最终结果如下

通过以上代码我们同时操作了前端交互与数据库,并且界面都是服务端渲染的。第一次接触的同学可能会有点混乱,觉得开发时会不会搞混,其实没关系,等渐渐熟悉了服务端框架这套逻辑后,他的逻辑还是很清晰可控的。

nodejs中有一个非常全面的api框架叫 nestjs[3]他与nextjs一个字母之差但是使用场景完全不同,nestjs是类似java spring boot的全面服务端框架,但是nextjs提供了基本够用的服务端与数据库交互能力,重点在前后端融合这里。在非复杂业务下,直接在一个框架里,甚至一个文件里完成服务端与前端的工作开发效率岂不是起飞?

我开发的所见即所得Markdown桌面编辑器叫《青石》,他的在线版也是使用nextjs实现,体验接近于typora。感兴趣的小伙伴可以关注 GitHub。或在线体验

其实大型项目没有那么多,不需要redis、docker、负载均衡、数据库分布式之类的才能运行,拿起他开始创造吧,快速实现的你想法,给公司与客户带去价值。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1840.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!