Intact

Appearance

next ​

使用 ​

创建项目

pnpm create next-app

概念 ​

解释一下next的混合渲染机制

Next允许页面的一部分在服务器端渲染，另一部分在客户端渲染，结合两者的优势，但相应的，编写代码时要进行区分

渲染类型包括三方面

  1. 静态生成（SSG）

  2. 服务器渲染 (SSR)

    next默认在服务端渲染组件

  3. 客户端渲染

    "use client"

比如layout整体上使用SSR，部分动态内容需要用到client，那么，它的组织架构类似于

Layout default SSR
 - component1 SSR
 - component2 SSR
 - component3 CSR
 - component4 SSR

在网络请求中，会进行串行请求，先请求SSR的静态内容，再请求CSR动态内容

assets优化机制 ​

  • 对字体：预下载字体，内置库可以导入google等字体，对cumulative layout shift进行了优化（next/font/google

  • 对图片：优化多设备图片切换，布局偏移，图片懒加载，屏幕响应式大小加载，现代图片扩展名支持（next/image && Image

  • 对链接：优化full refresh（next/link Link

  • 对加载：不同于SPA单次全部加载，next对其进行code split，分段式加载；prefetch预加载

react server ​

  • @vercel/postgres
最大的特点：拦截了api层，客户端直接访问服务器

异步组件定义 ​

  • export default async function(){}

路由 ​

  • 集中式路由与约定式路由——next选择约定

  • Route groups allow you to organize files into logical groups without affecting the URL path structure. When you create a new folder using parentheses (), the name won't be included in the URL path. So /dashboard/(overview)/page.tsx becomes /dashboard.

    文件名以小括号来包裹，可使其不在路由列表中

  • 如何理解Suspense？

    在目标条件达成之前，延迟渲染

更详细地来说，指定下属组件为流式组件，进行非阻塞的流式渲染；其余的UI不会被阻塞

suspense并不能改变包裹组件的动态性，是先有动态组件，再有suspense包裹，属于加分项而不是必须项；

在阅读上，suspense在项目中可以用来区分静态内容和动态内容

  • 如何理解数据的预渲染？

    next中，基于路由的页面的内容，可以人工地被分为静态构建部分和动态加载部分
实现了必要的框架的秒级加载，以及数据的延迟加载，没有SPA模式下一次性加载所有内容带来的渲染速度慢以及竞争性渲染的缺点
将动静结合

数据组件 ​

  • card
  • RevenueChart
  • LatestInvoices

request waterfall ​

  • 何为请求瀑布？

    网络上进行串行的请求

服务端组件 && 客户端组件 ​

  • 服务端组件，类似于后端
  • 客户端组件，传统的前端

静态渲染与动态渲染 ​

  • 如何理解静态渲染？

    静态渲染的结果会通过CDN缓存，提高响应速度

减轻服务器响应的压力——内容是静态的，属于缓存，不需要动态生成内容

静态渲染更适合数据完全共享的博客 && 文档 && 产品发售页、或者不需要数据的页面，比如展示页 && 宣传页
	及时响应最新数据

  • 如何理解动态渲染？

    增加服务器压力，但拥有更多的可操作性——每次请求都生成新的内容

后端添加额外的信息，比如cookie

动态渲染的性能，取决于最慢的资源请求与加载的速度

  • 如何处理动态渲染造成的阻塞问题？

    1. 通过stream chunk
2. <Suspense/>

  • 如何理解流式渲染？

    流式渲染可以使数据接收和渲染同步进行，比如completions流式回答

  • 通过添加fallback / placeholder，实现loading的效果，实质上是使用了流渲染；编译过程中会将其编译为静态文件；其实这种东西本质上就是提示用户，我在运行，没有挂掉

  • 如何理解流？

    收到了信息，作出对应的改变

  • prerendeing是如何实现的？

    1. 基于React的concurrency API
2. 对于网络请求 && 数据加载，通过defer等操作对其进行延迟

静态内容会被预先呈现，路由请求时对数据等网络请求的defer才完毕

Last updated: