部分预渲染
部分预渲染
这是一种新的渲染模型，允许您在同一路由中结合静态和动态渲染的优势，一个页面同时存在静态渲染部分和动态渲染部分。
预渲染使用 React 的 来推迟渲染应用程序的某些部分，直到满足某些条件（例如，加载数据）。
Suspense 的 fallback 与静态内容一起嵌入到初始 HTML 文件中。在构建时（或重新验证期间），将预呈现静态内容以创建静态 shell。动态内容的呈现被推迟到用户请求路由。
将组件包装在 Suspense 中并不会使组件本身成为动态的，而是将 Suspense 用作静态和动态代码之间的边界。
通过修改 ppr 配置即可开启部分预渲染。
Server Action (服务端函数)
React Server Actions 允许你直接在服务器上运行异步代码。它们消除了创建客户端节点来更改数据的需要。相反，您可以编写在服务器上执行的异步函数，并且可以从 Client 或 Server Components 调用这些函数。
在服务器组件中调用服务器作的一个优点是渐进式增强 - 即使 JavaScript 尚未加载到客户端上，表单也可以工作。
新版中间件
import { NextRequest, NextResponse } from 'next/server' const allowedOrigins = ['https://acme.com', 'https://my-app.org'] const corsOptions = { 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Authorization',} export function middleware(request: NextRequest) { // Check the origin from the request const origin = request.headers.get('origin') ?? '' const isAllowedOrigin = allowedOrigins.includes(origin) // Handle preflighted requests const isPreflight = request.method === 'OPTIONS' if (isPreflight) { const preflightHeaders = { ...(isAllowedOrigin && { 'Access-Control-Allow-Origin': origin }), ...corsOptions, } return NextResponse.json({}, { headers: preflightHeaders }) } // Handle simple requests const response = NextResponse.next() if (isAllowedOrigin) { response.headers.set('Access-Control-Allow-Origin', origin) } Object.entries(corsOptions).forEach(([key, value]) => { response.headers.set(key, value) }) return response} export const config = { matcher: '/api/:path*',}
来源整理自：vue3js.cn 面试官系列
