Next.js 实战项目 | 青训营笔记

skyclouds2001
95 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天

基本概念

  1. CSR

    客户端渲染 Client-Side Rendering

    目前常见B端Web应用开发模式

    前后端分离，服务器压力较轻，渲染主要在客户端进行

  2. SSR

    服务端渲染 Server-Side Rendering

    早期的 JSP 和 PHP，前端仅负责 UI 和交互

  3. BFF Backend For Frontend

    同构 SSR

  4. SSG

    静态站点生成 Static Site Generation

    构建时直接生成 HTML 文件，每次访问时直接返回 HTML 给客户端

  5. SSR、SSG优势

    • 利于 SEO
    • 更短的首屏时间

原生实现 SSR

React 原生服务器渲染 API

rendertostring

hydrateRoot

模板渲染的同构

路由同构

Head 标签修改

脱水注水

性能优化

Next.js 客户端

  • 初始化

    npx create-next-app@latest --typescript

    next.config.jsnextjs配置文件

  • 数据获取

    getInitialProps（已弃用）

    getServerSideProps 服务端渲染

    指定页面渲染模式是 SSR

    getStaticProps 静态站点生成（构建时执行）

    指定页面渲染模式是 SSG

    getStaticPaths 静态站点生成（构建时执行）

    涉及动态路由时使用

  • CSS modules

    原生支持 CSS modules

    指定 CSS 文件为 *.module.css 启用

  • 文件式路由

    pages文件夹内的文件自动被视为路由

    pages/api文件夹内文件自动被视为服务器端接口

  • 路由跳转

    link（next/link）

    useRouter（next/router）

  • header 设置

    Head（next/head）

  • CSS 适配

    利用 CSS 变量和媒体查询实现

    @media screen and (max-width: 1000px)

    或使用 JS 实现组件适配

  • 大图优化

    使用 webp 图片

    可以使用在线转换器

Next.js 服务端开发

  • 接口开发

    /page/api 文件夹下

  • 调试 debug

  • CMS

    Content Manage System

    strapi

    Content-Type Builder 构建结构体

    Content Manger 配置数据源并发布

    Settings Roles 选择角色并选择接口类型

    （嵌套需添加 populate=deep 参数 使用 strapi-plugin-populate-deep 插件）

项目开发

  • 首页

    • 页面&多媒体&动画适配
    • BFF
    • strapi

  • 文章详情页

    • 页面&多媒体&动画适配

    • BFF

    • strapi

    • 多媒体格式转换

      • markdown 转 html showdown
      • html转dom dangerouslySetInnerHTML
      • 公共样式定义

  • 主题化

    • 基础样式和背景抽离
    • 主题化context注入
    • 取出theme和setTheme
    • 多进程间的主题同步（监听storage事件，设置storage）
const showdown = require('showdown')
const converter = new showdown.Converter()
const text = '# hello, markdown!'
const html = converter.makeHtml(text)

localhost与127.0.0.1跨域

avatar
文章
阅读
粉丝