Next.js 一 路由基础

Next 学习笔记,读自 Next.js 官方文档。

React 核心知识

React 组件分为 Server Component 和 Client Component。

  • Client Component 需要特殊指定 'use client';
  • Client Component 不能引用 Server Component。
  • 从 Server Component 传递属性到 Client Component 需要序列化。
  • 比起客户端获取数据,更推荐在服务器端获取数据。
  • React Context 只能在 Client Component 里使用。
  • Server Component 无法使用 context 共享数据,需要使用其他机制。例如数据池等。

页面和布局

概述

next routing, 推荐使用 App Router 的 app 文件结构管理。

  • page.js 路由入口
  • layout.js 子路由共享的部分
  • loading.js 加载时显示的页面
  • error.js 出错的时候显示的页面
  • not-found.js 路由未找到
    image.png

以服务端为中心的路由

App Router 使用服务端为中心的路由,客户端无需下载整个路由。不过使用 Link Component,可以像客户端路由一样访问页面。当进行跳转的时候,不会重新加载整个页面。客户端对路由进行了缓存,在特定情形下,可以复用路由。

部分渲染

相同的部分不会进行渲染,只有不同的部分重新渲染。

高级模式

  • 并行路由:可以在一个视图中渲染多个页面。
  • 拦截路由:在某个页面的上下文中显示另一个页面。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容