使用 NextJS 和 TailwindCSS 重构我的个人博客

2021-11-15 15:02:23 浏览数 (1)
  • git地址
  • 在线地址

这是笔者第三次重构博客，虽然博客应用是最简单的应用，但学习新技术何不从重构博客开始？

  • 第一版：使用 Hexo 和 Github pages
    • 优点：重新部署只要花5分钟，内容管理在本地 纯静态、免费；
    • 缺点：依赖Github，国内访问困难；
  • 第二版：React Antd Mysql 服务器是阿里云 ESC 最低配
    • 优点： 感觉没什么优点；
    • 缺点： 浏览器渲染，搜索引擎无法收录 ESO 优化难，Antd 组件使用方便，但前台页面定制需要覆盖样式；
  • 第三版：NextJS TailwindCSS Postgresql
    • 优点： 服务端渲染（SSR) 静态生成， 访问速度极快，全新 UI 支持换肤；

TailwindCSS

在国外如火如荼，但是在国内却很少看到在生产上应用，对我来说， TailwindCSS 不仅仅是一个原子类的超级样式库；

1、我们在写样式的时候，经常会写类名，团队成员之间会存在样式冲突的可能，虽然我们可以使用 css modules 来避免，但却会存在取类名称的疲劳的问题，重复的类名称 -header,-body -container --wrapper等；

2、Utility-First： 默认采用 rem 单位， 变量也就是16 的倍数， px-1是 16 的 1/4 也就是 4 px，我们不会写出13px、17px 等不统一的单位变量，正所谓失之毫厘，差之千里。 配合 VScode 插件， 我们可以根据提示实时看到实际单位数值，写出高度还原高保真的样式；

3、jwt 模式： just-in-time 模式，可以写出在原子类之外的样式，比如: w-[762px]表示width:762px, grid-cols-[1fr,700px,2fr] 表示grid-template-columns: 1fr 700px 2fr; 当然还有h-[calc(1000px-4rem)]等等，这些都是运行时才生成的样式；配合在tailwind.config.js 中加入purge: ['./src/**/*.{js,ts,jsx,tsx}']打包时只会提取使用到的样式，让应用css最小化。

4、之前写了《使用 CSS variables 和Tailwind css实现主题换肤》也运用到了我的博客中。

Next.js

next.js 是一个 react 服务端渲染框架，相比react单页应用，网络爬虫可以识别 HTML 语义标签，更有利于 SEO。

接下来介绍下 NextJS 主要 API：

getServerSideProps 服务端渲染

下面是最简单的客户端渲染代码

代码语言：javascript复制
import React, { ReactElement, useEffect, useState } from 'react'
import { useParams } from "react-router-dom";

export default function Post(): ReactElement {
    let { slug } = useParams();
    const [post, setPost] = useState({
        title:'',
        content:''
    })
    useEffect(() => {
        fetch(`/api/post/${slug}`).then((res)=>res.json()).then((res)=>{
            setPost(res)
        })
    }, [])
    return (
        <>
            <h1>{post.title}</h1>
            <div dangerouslySetInnerHTML={{
                __html:post.content
            }}></div>  
        </>
    )
}

改成 NextJS 后的代码如下

代码语言：javascript复制
// pgaes/blog/[slug].tsx
import React, { ReactElement } from 'react'

export default function Post({ post }): ReactElement {
    return (
        <>
            <h1>{post.title}</h1>
            <div dangerouslySetInnerHTML={{
                __html:post.content
            }}></div>  
        </>
    )
}

export async function getServerSideProps(context) {
  const { slug }=context.params
  const res = await fetch(`https://.../api/post/${slug}`)
  const post = await res.json()

  return {
    props: {
       post
    },
  }
}

getServerSideProps 是在node端处理，每个 request 请求时执行。

而文章内容写完之后是通常不变的，所以可以先将页面静态存储在服务器上，这样就可以大大减小数据库压力。

getStaticProps 在构建时请求数据。

代码语言：javascript复制
export async function getStaticProps(context) {
  // fetch data
  return {
    props: {
        //data
    },
  }
}

这样就需要在构建时获取全部文章列表，而博客详情页是一个动态路由，就需要 getStaticPaths 这个API

getStaticPaths 构建时获取动态路由的数据

代码语言：javascript复制
export async function async getStaticPaths() {
   const slugs= await getAllSlugs()
  return {
    paths: slugs.map(slug=>({
        params:slug
    })),
    fallback: true //or false
  };
}

当网站构建后，新写的文章也需要生成静态页面，这时就可以将fallback 设置为true， 如果设为false，则在构建之外的文章都将返回404页面。

下面是文章详情页的主体代码

代码语言：javascript复制
// pages/posts/[slug].js
import { useRouter } from 'next/router'

function Post({ post }) {
  const router = useRouter()

  // 如果页面还没静态生成，则先显示下面的loading
  // 直到 `getStaticProps()`运行完成
  if (router.isFallback) {
    return <div>Loading...</div>
  }

  // Render post...
}

// 在构建时运行，获取全部文章路径
export async function getStaticPaths() {
  return {
    // 在打包时值生成 `/posts/1` 和 `/posts/2` 的静态页面
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    // 开启其他页面的静态生成
    // For example: `/posts/3`
    fallback: true,
  }
}

// 在构建时运行，根据params中的id 获取文章详情
export async function getStaticProps({ params }) {
  // 如果页面的路由是 /posts/1, 这 params.id 的值就是1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // 把数据专递给页面的props
  return {
    props: { post },
    //当请求进入的时候再次生成文章详情页，比如修改文章重新生成
    // 1s 内最多生成1次
    revalidate: 1,
  }
}

export default Post

prisma —— 下一代 ORM 框架

Nodejs 框架访问数据库，往往会需要一个ORM 框架来帮我们管理数据层代码，而在 Node.js 社区中，sequelize、TypeORM 等框架都被广泛应用，而 prisma 却是一个新秀。

Prisma 支持 Mysql、Postgresql 和 Sqlite， 访问官网我们可以很容易的上手，也可以快速的从老项目接入

虽然 Prisma 和 TypeORM 解决了类似的问题，但它们的工作方式却大相径庭。

与 TypeORM 对比

TypeORM 是一种传统的 ORM，它将表映射到模型类。这些模型类可用于生成 SQL 迁移。然后，模型类的实例在运行时为应用程序的 CRUD 查询提供一个接口。

Prisma 是一种新的 ORM，它缓解了传统 ORM 的许多问题，例如: 模型实例的膨胀、业务与存储逻辑的混合、缺乏类型安全性或由延迟加载引起的不可预测查询。

它使用 Prisma Schema，以声明的方式定义应用程序模型。然后使用 Prisma Migrate 命令， Prisma Schema 会生成 SQL 迁移并根据数据库执行它们。Prisma CRUD 查询由 Prisma Client 提供，这是一个针对 Node.js 和 TypeScript 的轻量级且完全类型安全的数据库客户端。

对比下二者代码

  1. Prisma Schema
代码语言：javascript复制
model User {
  id      Int      @id @default(autoincrement())
  name    String?
  email   String   @unique
  posts   Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  authorId  Int?
  author    User?   @relation(fields: [authorId], references: [id])
}

Schema 是一个描述文件，描述了数据模型直接的关系，再通过prisma generate 生成 typescript 声明文件。

  1. TypeORM Entity
代码语言：javascript复制
import { Entity, PrimaryGeneratedColumn, Column, OneToMany, ManyToOne } from 'typeorm'

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number

  @Column({ nullable: true })
  name: string

  @Column({ unique: true })
  email: string

  @OneToMany(
    type => Post,
    post => post.author
  )
  posts: Post[]
}

@Entity()
export class Post {
  @PrimaryGeneratedColumn()
  id: number

  @Column()
  title: string

  @Column({ nullable: true })
  content: string

  @Column({ default: false })
  published: boolean

  @ManyToOne(
    type => User,
    user => user.posts
  )
  author: User
}

Entity 是在运行时，代码通过@Entity()来实现 JavaScript 类的继承。

过滤

  1. Prisma
代码语言：javascript复制
const posts = await postRepository.find({
  where: {
    title: { contains: 'Hello World' },
  },
})
  1. TypeORM
代码语言：javascript复制
const posts = await postRepository.find({
  where: {
    title: ILike('%Hello World%'),
  },
})

多对多关系级联操作

  1. Prisma
代码语言：javascript复制
type Categories={
  id?: number
  name: string
  createdAt?: Date | null
}[]

type PostBody = Post & {
  categories: Categories;
};

const { title, summary, slug, content, published, categories } =
    req.body as PostBody;

const connectOrCreate = categories.map(({ name }) => {
    return {
      create: {
        name,
      },
      where: {
        name,
      },
    };
  });
  const newPost = await prisma.post.create({
    data: {
      title,
      summary,
      slug,
      content,
      published,
      categories: {
        connectOrCreate,
      },
      user: {
        connect: {
          id: req.user.id,
        },
      },
    },
    include: {
      categories: true,
    },
  });

文章和分类是多对多的关系，一篇文章可以有多个分类，一个分类下可以有多篇文章，

categories 可以选择已经存在的分类，也可以是新加的分类,通过name唯一熟悉来判断是否要新增还是级联。

  1. TypeORM
代码语言：javascript复制
@Entity()
export class Post {
  @PrimaryGeneratedColumn()
  id: number

  @Column()
  @IsNotEmpty()
  title: string

  @Column({
    select: false,
    type: 'text',
  })
  content: string

  @ManyToMany((type) => Category, {
    cascade: true,//级联插入修改  boolean | ("insert" | "update" | "remove" | "soft-remove" | "recover")[]
  })
  @JoinTable()
  categories: Category[]
}

const newPost = postRepository.create({
      ...ctx.request.body,
    })

typeorm 通过cascade 属性 就可以级联增、删、改 软删除 等

Postgresql

本次重构还讲数据库迁移到了 Postgresql。

1、MySQL 里有只有 utf8mb4 才能显示 emoji 的坑, Pg 就没这个坑；

2、Pg可以存储 array 和 json， 可以在 array 和 json 上建索引；

代码编辑器

从上一版是 codemiror 和 remark 自己写的组件 ，这一版发现掘金的 Markdown 编辑比较好用，就直接使用了bytemd, 底层都是使用了 remark 和 rehype，支持任何框架，并且拥有丰富的插件，还是比较好用的，但是在文章详情页却没有单独的 TOC（目录）组件，得单独封装一个TOC组件了。

小结

本文主要是笔者记录重构博客所用的知识和记录，当然还有很多不足，也还有很多功能得开发， 比如：图床、评论、SEO优化、 统计和监控等。

当然内容是最重要的，希望以后每周或者每两周能够有一篇文章，记录和总结知识。

编程算法 typescript postgresql 云数据库SQLServer 云数据库postgresql

0 人点赞